文字超出使用省略号

发表于

我们经常需要使用到文字过长超出范围时使用省略号代替，而文本溢出有分为两种情况：单行和多行。

单行文本

具体实现

1
2
3
4
width: 具体宽度;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

多行文本

具体实现

1
2
3
4
5
width: 具体宽度;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 行数;
overflow: hidden;

在测试这一部分内容时，我发现如果文本内容中不是全部是中文的话，会出现问题。
举个例子

1
<div id="one">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
1
2
3
4
5
6
7
#one{
    width: 100px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

效果

如果换成中文，则没有问题

1
<div id="one">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</div>

效果

暂时不知道怎么解决，之后找到方法再说。