标签:soft 模型 排列 font ips 方式 设置 nowrap ima
宽度不固定,超出宽度则以省略号“...”来表示。
<div class="txt">
文字文字文字文字文字,文字文字文字文字文字文字文字文字文字,文字文字文字文字文字文字文字文字文字,文字文字文字文字文字文字,文字文字文字文字文字
</div>
.txt{
/*规定段落中的文本不进行换行:*/
white-space: nowrap;
overflow: hidden;
/* text-overflow属性表示规定当文本溢出包含元素时发生的事情;
ellipsis表示显示省略符号来代表被修剪的文本。*/
text-overflow: ellipsis;
}
效果如下:
多行省略,举个例子:超过三行后的文字省略
.txt{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;/*将对象作为弹性伸缩盒子模型显示*/
-webkit-line-clamp: 3; /*限制文本的行数,只显示3行*/
-webkit-box-orient: vertical;/*设置或检索伸缩盒对象的子元素的排列方式 */
}
<div class="txt">
超过3行超过3行超过3行,超过3行以省略号显示,超过3行超过3行超过3行,超过3行以省略号显示,超过3行超过3行超过3行,超过3行以省略号显示,超过3行超过3行超过3行,超过3行以省略号显示,
</div>
标签:soft 模型 排列 font ips 方式 设置 nowrap ima
原文地址:http://www.cnblogs.com/coldfishdt/p/7493278.html