用CSS实现超出的文字显示省略号
方式一(单行出现省略号)
这里用到了 text-overflow 属性。先简单介绍下 text-overflow:规定文本超出边界时的显示效果。
属于CSS3 ,所有主流浏览器支持。
text-overflow: clip | ellipsis | string ;
clip: 超出边界部分直接切掉,可以直接用 overflow:hidden 代替。
ellipsis: 用省略号来代替超出的文本。
string: 用给定的字符串来代替超出的文本。(在FireFox上能显示,兼容性不好,不建议使用)
.d1{ width:100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
设置了以上 css 的元素必须能对 width 属性生效(如:display 为 block, inline-block)。
设置了以上 css 的元素,如果里面有行内元素,即使里面的行内元素不设置上述 css,也会有显示省略号效果。
设置了样式的标签里面可以设置别的标签。
<div className='d1'> <span className='red'>复旦复</span> <span className='green'>华绝代</span> 风华就就辅导辅导费 </div>
方式二(多行出现省略号)
p { width: 300px; display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示 -webkit-box-orient: vertical; // 设置或检索伸缩盒对象的子元素的排列方式 -webkit-line-clamp: 2; // 显示两行 overflow: hidden; }