css3 超出显示省略号

CSS3中的text-overflow属性可以使超出容器宽度的文本显示省略号，特别是在一些展示信息的场合，经常会用到该属性。

.text {
    white-space: nowrap;
     /*禁止换行*/overflow: hidden;
     /*文本超出隐藏*/text-overflow: ellipsis;
 /*超出部分显示省略号*/}

上述代码是一个基本的text-overflow属性实现代码，需要注意的是，该属性只对块级元素有效，且需要满足以下条件：

• 容器需要设置宽度
• 文本需要在同一行
• 禁止换行

除此之外，text-overflow属性还有一些其他值，分别是：

• clip：超出部分被裁剪
• string：超出部分显示指定的字符串

.text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: string;
    -webkit-text-overflow-style: filled;
 /*Safari*/}
/*指定显示的字符串*/.text::after {
    content: '...';
}
    

上述代码即可实现当文本超出容器时，显示指定的字符串。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！