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

css 代码

 

1. "text/css">  
2. .textOverFlow {  
3. width:300px;  
4. overflow:hidden;  
5. text-overflow:ellipsis;  
6. whitewhite-space:nowrap;  
7. border:1px solid #ddd;  
8. }  
9.    

xml 代码

 

1. <div class="textOverFlow">  
2. 测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测  
3. div>   

实现原理：

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