我们经常会遇到标题或者罗列项字数很多,而盒子宽度有限的情况,这时为了美观就需要控制显示文本。
具体实现代码如下:
style {
overflow: hidden;
width:100px;/* 这里可以用max-width: ;加min_width:;自适应*宽度布局/
text-overflow:ellipsis;
white-space: nowrap;
}
当然,以上只是单行的文本超出控制,有时候会碰到需要多行文本控制显示的,这列我们会用到一个webkit的css扩展属性,该方法适用于webkit浏览器和移动端的显示;
具体代码如下:
max-width:300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
效果如下: