css多行文字省略

CSS中有一个属性，可以让多行文字在一定程度上省略显示，这个属性就是text-overflow。

text-overflow: ellipsis;
    

这个属性需要结合两个属性来使用，一个是overflow，一个是white-space。

overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    

overflow属性里面的hidden表示超出元素内容区域的部分被隐藏起来，而white-space属性的nowrap表示文字不换行。这样就能让多行文字变成单行文字了。而text-overflow属性里的ellipsis表示超出部分使用省略号代替。

需要注意的是，这个属性只对单个块级元素起作用，对于内部子元素中的文本，可以使用display: inline-block; 来实现。

.parent {
    width: 200px;
    height: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.child {
    display: inline-block;
}
    

在这个例子中，parent元素设置了宽度和高度，overflow和white-space属性，以及text-overflow属性，表示只显示元素区域内的文字，并且使用省略号代替超出部分。而在内部，使用inline-block让文字在同一行内显示。

这样，就能在不使用JS等脚本的情况下实现多行文字的省略了。

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