在开发时候,后端传给我们一些文字进行渲染,一些标题性的单行文字,当达到一定宽度就会溢出不显示并以点点点来显示。(类似下图效果的实现
先看下我们需要实现什么:
1、宽度设置
2、溢出的处理
3、溢出部分用点点点来代替
.p1 {
width: 500px;
height: 50px;
line-height: 50px;
font-size: 24px;
font-weight: bold;
border: 1px solid black;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<p class="p1">两战13中4!国产詹姆斯已成高薪低能?他还远没到爆发的时候</p>