【注册】获得论坛邀请码![提示]本站贴图请注意!社区新会员朋友签到诚招版主,欢迎加入社区!
【增加贡献】本站宣传贴论坛之星评选[现金积分兑奖]本站免责声明本站专用QQ群
返回列表 发帖

如何用 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 对象。
删除昨天的烦恼,选择今天的快乐,
设置明天的幸福,存储永远的爱心,
取消世间的仇恨,粘贴美好的心情,
复制醉人的风景,打印迷人的笑脸。
祝来到XGHOME的朋友每天都有好心情!
小鬼论坛

有那么一点感觉
但不是很明显
每个人的生活里都是有遗憾的,因为遗憾,我们才生活在一种错过的美丽里……

TOP

返回列表