在文字内容很多的情况下,且这些内容还会影响到盒子大小,这时候我们就需要限制盒子宽和高,但内容的显示又不是很美观,这时候我们就可以通过以下这些代码来修饰内容显示效果
.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;
时间: 2024-10-25 09:15:58