[分享]css两行截取字符

在进行前端开发的时候，经常会遇到需要截取字符串的情况。在CSS中，有两种方法可以截取字符串，分别是text-overflow和ellipsis。

.text{
    width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} 

上述代码实现了一个在宽度为100px的元素中截取文本并添加省略号的效果。关键属性是text-overflow和ellipsis，其中text-overflow用于控制如何处理文本溢出，而ellipsis则指定省略号作为溢出文本的标记。注意，在使用该方法时，需要将white-space属性设置为nowrap以保证不换行。

.text{
    width: 100px;
    overflow: hidden;
}

.text:after{
    content: "...";
    position: absolute;
    right: 0;
    bottom: 0;
    padding-left: 5px;
    background-color: #fff;
} 

另一种方法是通过伪元素来实现，具体代码如上。在这个方法中，我们首先使用overflow: hidden将元素内部内容截断，接着使用::after伪元素在元素内部最后一个字符的位置添加省略号。这种方法比text-overflow更加通用，因为它可以用于所有元素而非仅限于文本。