文本超出盒子的内容用省略号代替

实现的方法：给div添加属性overflow:hidden; white-space:nowrap; text-overflow:ellipsis;

overflow:hidden; 是让超出盒子的内容隐藏；

white-space:nowrap; 让盒子右端的内容不能换行显示，则盒子的内容就在水平方向上溢出了；

text-overflow:ellipsis;可以在盒子的末尾显示一个省略的符号“...”,但是这个属性只是在盒子中的内容在水平方向上超出盒子的范围时有效

例子：

<div>
    段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落段落
</div>

css：

div{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;//safari浏览器
    -o- text-overflow:ellipsis;//opera浏览器
    width:300px;
    border:1px solid #ccc;  
}

text-overflow:ellipsis;是IE浏览器所扩展出来的，被css3所接纳的一个属性；IE6以上浏览器、opera及safari浏览器支持

 

转载于:https://www.cnblogs.com/suxh/p/4609761.html