文本css样式

多行文本省略

<div class="test">Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati voluptate placeat harum dignissimos aut in error qui nobis doloremque illum sunt esse veniam, atque delectus cum enim quis pariatur? Incidunt aspernatur iste, harum ut nihil obcaecati omnis vitae tempora id consequuntur ipsam, cupiditate ad adipisci delectus. Laudantium deleniti maiores illum officia, voluptatum quas consectetur voluptas facere iste, atque velit cum? Dolores dolore distinctio minus quo ducimus tempora eaque sed quia possimus exercitationem quidem, aliquid delectus? Voluptate sint veritatis hic tempore, suscipit deserunt, in molestias quibusdam fugiat quas dolores corrupti? Quos porro, fugiat facere cumque dicta soluta itaque possimus, architecto harum praesentium consectetur sequi quis? Iusto quia reiciendis amet aut nihil! Necessitatibus, esse voluptate laboriosam harum voluptatibus similique nulla porro accusamus provident eos sapiente, cum aliquid deleniti, vitae quae reiciendis consequuntur eveniet tenetur ratione. Facilis, at amet illo adipisci cupiditate quis impedit eius nesciunt maiores explicabo enim ipsum, optio error fugiat magnam ratione accusamus quos eaque laudantium non corrupti corporis. Architecto necessitatibus ea nam minima inventore magnam incidunt quasi eius praesentium, aspernatur quis illo eos enim fugiat cumque veniam consequuntur dolorem maxime, odit ex ratione! Magnam cumque facilis, nostrum voluptate ea incidunt labore vero iure eligendi maxime, odio in qui dolores.</div>

.test {
    display:-webkit-box; // 将对象作为弹性伸缩盒子模型显示
    text-overflow: ellipsis; //溢出用省略号显示
    overflow: hidden; //超出的文本隐藏
    white-space: normal; 换行
    // height: 显示总行数的高度;
    -webkit-line-clamp: 5; // 最大显示的行数，超过则省略
    /* autoprefixer: off */  //解决react项目中-webkit-box-orient样式不生效
    -webkit-box-orient: vertical; //从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
 }

文字两端对齐

{
	text-align: justify;
	text-align-last: justify;
	text-justify: distribute-all-lines;
}