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

 

posted @ 2025-03-13 14:08  smil、梵音  阅读(493)  评论(0)    收藏  举报