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

尘起缘飞

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

HTML:
<div class="textOverFlow">     xueol.com 精华代码 xueol.com 精华代码 xueol.com 精华代码xueol.com 精华代码xueol.com 精华代码xueol.com 精华代码xueol.com 精华代码xueol.com 精华代码</div>  

实现原理：

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