一、CSS单行文本溢出省略问题:[CSS] 纯文本查看 复制代码 .overhidde{
width: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
说明:
这里的width属性是必须的,因为需要知道它的宽度是多少,才能判断溢出;
overflow:hidden; 是为了隐藏溢出的文本;
white-space: nowrap; 默认。空白会被浏览器忽略;
text-overflow: ellipsis; 显示省略符号来代表被修剪的文本。
二、css多行文本溢出省略问题
[CSS] 纯文本查看 复制代码
.overhidden2{
height:53px;
width:100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
说明:
在这里height属性和overflow属性相结合是为了隐藏省略号一下的文本,大家可以试一下不加的效果,就一目了然了。
line-clamp属性是为了控制文本显示多少行。
关于display和box-orient,在这里简单说一下:
必须定义display属性才可以对box进行划分。
box-orient 属性指定一个box子元素是否应按水平或垂直排列。
|