控制文字行数以及用省略号代替被修剪文本

Posted 2020-09-19 WEB1010113045

在文字内容很多的情况下，且这些内容还会影响到盒子大小，这时候我们就需要限制盒子宽和高，但内容的显示又不是很美观，这时候我们就可以通过以下这些代码来修饰内容显示效果

.content{
	width:100%;
	height: 34px;
        overflow: hidden;
        text-overflow: -o-ellipsis-lastline;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}

width:100%;-----盒子的宽度

height:34px;-----盒子的高度(跟显示几行有关系)

overflow:hidden;-----内容超出隐藏

text-overflow:-o-ellipsis-lastline;

text-overflow:ellipsis;-----显示省略符号来代表被修剪的文本。

display:-webkit-box;

-webkit-line-clamp:2;-----限制几行

-webkit-box-orient:vertical;