1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

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

在显示列表的时候,太长的标题默认会换行显示,而这样的显示方式往往会破坏我们原有的页面布局,如何在我们无法知道标题长度的情况下,将超出显示宽度的内容隐藏起来?一个常见的做法是用服务器端语言判断、截取,但是这样在以后需要显示更长的标题时就需要修改服务器端脚本。
这里介绍的是如何用CSS将超出显示宽度的内容隐藏起来,在 IE 下我们还可以添加一个省略号,来表示多余的字符已经截断,以后改版也更方便。

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

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

原文链接:https://www.qiquanji.com/post/5113.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:高级教程 浏览: