[分享]css内容超出三行省略号

CSS中的省略号是一个常见的视觉效果，可以将内容超出一定长度的文本截取并用省略号代替，让页面更加美观。在CSS中，实现省略号的方法是使用textoverflow属性。首先，将元素的宽度和溢出部分隐藏，...

CSS中的省略号是一个常见的视觉效果，可以将内容超出一定长度的文本截取并用省略号代替，让页面更加美观。

在CSS中，实现省略号的方法是使用text-overflow属性。首先，将元素的宽度和溢出部分隐藏，然后使用text-overflow属性来设置省略号的样式。

 .overflow-text {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出部分 */
    text-overflow: ellipsis; /* 添加省略号 */
  } 

其中，text-overflow属性有三个可选值：

• clip：默认值，将溢出部分裁切，看不到

• ellipsis：使用省略号代替溢出部分

• string：使用自定义的字符串代替溢出部分

需要注意的是，text-overflow属性只能在display属性值为block、inline-block、table-cell或overflow属性值不为visible时才能生效。

最后，值得一提的是省略号只是一种视觉效果，实际上元素中的全部内容都仍然存在。当用户将鼠标悬停在省略部分上时，会出现提示框将内容完整显示出来。因此，在使用省略号的时候，应该考虑到用户交互体验。