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

最新推荐文章于 2024-02-20 15:30:56 发布

最新推荐文章于 2024-02-20 15:30:56 发布 · 322 阅读

文章标签：

#CSS #IE #XML

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用CSS实现文本溢出时显示省略号(...)的效果，具体包括设置元素宽度、隐藏溢出内容、使用IE专有属性text-overflow:ellipsis以及保持文本在同一行显示的方法。

css 代码

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

xml 代码

<div class="textOverFlow">
测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测
div>

实现原理：

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