网页设计中,在遇到需要在有限的范围内显示一些长文本或是段落时,让超出部分的文本以省略号的方式来显示是个不错的解决方案。之前看到很多案例是用后端或是 JavaScript 来实现的,其实如果不考虑 IE 浏览器,CSS 也能很好的实现这个功能。
CSS 实现单行省略号
先来看看比较简单的单行省略号场景。假设有下面这样一段 HTML 代码:
<div>这是一段用来演示 CSS 效果的文字示例。</div>
它本身的 CSS 定义如下:
div {
padding: 0.5em 1em;
border: 1px solid #CCC;
width: 200px;
}
其中的宽度定义会让它折行显示:
这是一段用来演示 CSS 效果的文字示例。
因为时要实现单行省略号,所以先要让它只显示一行。这个通过 CSS 的禁止换行属性就能做到。在 CSS 中给它添加一行代码:
div {
/* ... */
white-space: nowrap;
}
为了方便了解新添加的 CSS 代码,这里的
/* ... */
代表 div 标签已有的 CSS 代码,以下类似且不再赘述。
这时文字会直接撑破 div
标签的宽度显示:
这是一段用来演示 CSS 效果的文字示例。
接下来需要隐藏超出的文本内容,继续补充 CSS 代码:
div {
/* ... */
overflow: hidden;
}
现在超出 div
的文字被直接隐藏了:
这是一段用来演示 CSS 效果的文字示例。
最后是让超出宽度的文本以省略号的方式显示,相应的 CSS 代码如下:
div {
/* ... */
text-overflow: ellipsis;
}
来看看效果:
这是一段用来演示 CSS 效果的文字示例。
总结起来就 4 点:
- 用
width
给放文本的标签添加宽度属性。 - 用
white-space: nowrap;
禁止文本换行。 - 用
overflow: hidden;
隐藏超出标签内容的显示。 - 用
text-overflow: ellipsis;
显示超出的文本内容以省略号显示。
CSS 实现多行省略号
用 CSS 实现多行文本自动显示省略号目前的方案目前主要适用于 webkit 引擎的浏览器。Chrome,Firefox 和 Safari 都能支持。沿用上面 div
标签的基础属性,只需要补充如下几个 CSS 样式:
div {
/* ... */
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
}
来看看效果:
这是一段用来演示 CSS 效果的文字示例,这次演示的是多行文本的效果。
稍微解释一下:
overflow: hidden;
让超出内容不显示。display: -webkit-box;
设置内容容器以弹性布局模型显示。-webkit-box-orient: vertical;
设置内容使用垂直布局。-webkit-line-clamp: 2;
限制显示的行数。需要显示几行调整这个数字。