龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

CSS 将超出显示宽度的内容隐藏起来

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
介绍的是如何用 CSS 将超出显示宽度的内容隐藏起来,在 IE 下我们还可以添加一个省略号,来表示多余的字符已经截断,以后改版也更方便。 实现原理: (1)指定宽度:width:300px; (
介绍的是如何用 CSS 将超出显示宽度的内容隐藏起来,在 IE 下我们还可以添加一个省略号,来表示多余的字符已经截断,以后改版也更方便。

实现原理:
(1)指定宽度:width:300px;
(2)overflow:hidden; 将超出内容隐藏
(3)text-overflow:ellipsis; IE 专有属性,当对象内文本溢出时显示省略标记(…)
(4)white-space:nowrap; 强制在同一行内显示所有文本,直到文本结束或者遭遇 br 对象

 代码如下


<style type="text/css">
.textOverFlow
{   
 width:300px;    
overflow:hidden;    
text-overflow:ellipsis;    
white-space:nowrap;    
border:1px solid #ddd;
}

</style>

<div class="textOverFlow"> fdsafdsafdsafdsafdsafdsafdsafdsafsafdsa www.111cn.net </div>


精彩图集

赞助商链接