p { width: 100px; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }在这段代码中,我们设置了一个p标签的宽度为100px,高度为30px,并且指定了文本溢出时的处理方式。overflow:hidden表示溢出隐藏,text-overflow:ellipsis表示使用点点点代替溢出部分,white-space:nowrap表示禁止换行。 我们可以在一个p标签中添加一些长文本,比如:
<p>这是一段非常长的文本,如果超过一定的长度,CSS就会自动截断并用“...”代替。</p>当文本内容超过了指定的宽度时,浏览器会自动隐藏溢出的部分并用点点点代替,如下所示: 这是一段非常长的文本,如果超过一定的长度,CSS就会自动截断并用“...”代替。 我们可以通过调整p标签的宽度和高度来控制文本的显示长度,也可以通过修改text-overflow的值来改变点点点的样式,比如使用双下划线代替点点点:
p { width: 100px; height: 30px; overflow: hidden; text-overflow: "__"; white-space: nowrap; }使用CSS溢出是点点点,可以方便地控制文本内容的显示长度,避免页面过长造成用户浏览体验不佳。
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://www.haodehen.cn/did222076