码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2015-06-30 12:39:04      阅读:324      评论:0      收藏:0      [点我收藏+]

标签:

实现的方法:给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浏览器支持

 

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

标签:

原文地址:http://www.cnblogs.com/suxh/p/4609761.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!