css3 超过宽度用省略号

CSS3中提供了一种超过宽度用省略号的处理方法。在实际开发中，可能会遇到这样的情况，某些文本内容超过了预设的宽度，但不想让它换行，而是希望显示省略号。

我们可以使用CSS3中的text-overflow属性来实现这种效果。这个属性分为两种情况，一种是单行文本溢出，另一种是多行文本溢出。

单行文本溢出：

.overflow-text {
    white-space: nowrap;
     // 强制单行显示overflow: hidden;
     // 超出部分隐藏text-overflow: ellipsis;
 // 超出显示省略号}

这里的white-space属性强制文本在一行内显示，overflow属性让超出部分的文本隐藏，而text-overflow则在超出的位置显示省略号。

多行文本溢出：

.overflow-text {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
     // 指定行数overflow: hidden;
    text-overflow: ellipsis;
}
    

在多行文本的情况下，我们需要使用CSS3中的display属性，将文本的显示方式设为-webkit-box，然后指定展示的方向-webkit-box-orient为垂直，接着使用-webkit-line-clamp属性控制显示的行数。同样，overflow属性将超出部分的文本隐藏，text-overflow则在超出的位置显示省略号。

通过text-overflow属性，我们可以非常方便地处理文本超出宽度的情况，让页面显示更加美观。

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