标题: 如何用 CSS 将超出显示宽度的内容隐藏起来 [打印本页]

---

作者: 尘起缘飞    时间: 2007-5-26 13:06     标题: 如何用 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 对象。

---

作者: 小鬼    时间: 2007-6-7 19:57

有那么一点感觉
但不是很明显

---

欢迎光临 小鬼论坛 (http://bbs.xghome.net/)

Powered by Discuz! 7.2