截断方式可以通过js逻辑实现,也可以通过CSS样式实现,使用js逻辑实现难免会使代码变的复杂,而且不容易复用,推荐使用CSS实现文本截断,而且可以在不同的HTML片段中使用。
CSS截断显示内容主要通过white-space,overflow,text-overflow三个属性实现。
HTML:
<div class="hello substr">
hello world!
<div>
CSS:
white-space:nowrap;强制文本不换行
overflow:hidden;超过宽度部分进行隐藏
.hello{
width:40px;
}
.substr{
white-space:nowrap;
overflow:hidden;
}
hello
CSS:
text-overflow: ellipsis;根据文本长度剩余部分显示为“···”
.hello{
width:40px;
}
.substr{
white-space:nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
he···