[分享]css3怎么设置省略号

CSS3是一种强大的样式表语言，它提供了许多实用的属性和选择器，其中之一就是设置省略号为了实现省略号的效果，我们可以使用 textoverflow 属性，该属性值为 ellipsis，它会在文本溢出时...

CSS3是一种强大的样式表语言，它提供了许多实用的属性和选择器，其中之一就是设置省略号

为了实现省略号的效果，我们可以使用

text-overflow

属性，该属性值为

ellipsis

，它会在文本溢出时显示省略号。

/* 基本写法 */
.text {
  text-overflow: ellipsis;
  width: 200px;
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 必须指定滚动条，否则省略号不起作用 */
}

/* 支持多行文本的写法 */
.text {
  text-overflow: ellipsis;
  width: 200px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 显示两行 */
  -webkit-box-orient: vertical; /* 竖直排列 */
  overflow: hidden; /* 必须指定滚动条，否则省略号不起作用 */
} 

除了

text-overflow

属性之外，我们还要设置文本宽度、禁止换行以及文本超出宽度时隐藏溢出部分，这些步骤都是必不可少的。

需要注意的是，该属性不支持IE浏览器，所以在实现不同浏览器兼容性时需要注意。同时，文本超出宽度时调整字体大小和文本排列也可增强省略号效果。