用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;
}

效果图

   

MDN链接