text-overflow 属性可以设置以下文本省略方式:
clip:在文本框之外裁剪文本,不显示省略号。ellipsis:在文本框的末尾显示省略号。fade:在文本框的末尾使用渐变效果将文本淡出到背景色。initial:将属性重置为默认值。inherit:从父元素继承该属性。其中,最常用的就是 ellipsis,它可以在文本框的末尾显示省略号,可以通过以下 CSS 代码实现:
white-space: nowrap; /* 不换行 */
overflow: hidden; /* 超出文本框隐藏 */
text-overflow: ellipsis; /* 文本省略号 */
需要注意的是,text-overflow 属性只有在以下条件下才会生效:
white-space 属性的值为 nowrap,即不换行。overflow 属性的值为 hidden 或 scroll,即超出文本框隐藏或滚动。因此,使用 text-overflow 属性时需要配合上述两个属性一起使用,才能实现文本省略的效果。