text-overflow 属性值————————————————————
clip 修剪文本,强制截断,将超出文本隐藏。
ellipsis 显示“……”来代表被修剪的文本。
string 使用给定的字符串来代表被修剪的文本。
常用属性—————————
text-overflow: ellipsis;
该css的作用是,当内容超出“盒子”大小的时候,溢出的部分以“……”的形式显示。
按照text-overflow: ellipsis;使用规则,在标签样式中添加该属性未生效,
例如:
CSS样式————————————————————
.box{
text-overflow: ellipsis;
}
<div class="box">文字溢出效果测试。文字溢出效果测试。文字溢出效果测试。文字溢出效果测试。文字溢出效果测试。文字溢出效果测试。</div>
预览之后,发现并没有显示我们想要的需要效果。
其实还需要另外几个CSS属性的配合(或者说只有相应的限制条件,或者说处理状况的基础):
情况一(单行溢出处理)————————————–
width: 100%; /*规定盒子的大小,也可以是固定的值*/
white-space: nowrap; /*强制文字不换行,正常情况下浏览器默认处理是换行的,此设定相当于设定height值为单行高度*/
overflow: hidden; /*溢出隐藏*/
text-overflow: ellipsis;
情况二(多行溢出处理)————————————–
width: 100%; /*规定盒子的大小,也可以是固定的值*/
overflow: hidden; /*隐藏超出的内容*/
text-overflow: ellipsis;
word-break: break-all; /*破坏所有类型的字符对象*/
display: -webkit-box; /*对象作为伸缩盒子模型显示*/
-webkit-box-orient: vertical; /*设置或检索伸缩盒对象的子元素的排列方式*/
-webkit-line-clamp: 3; /*显示的行数*/
浏览器对该属性的支持问题—————————————-
text-overflow: ellipsis; /* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */
-o-text-overflow: ellipsis; /* Opera 9-10 */
注:如有不足的地方,希望联系修改!!!