zzxworld

用 CSS 让超出部分的文本显示为省略号

用 CSS 让超出部分的文本显示为省略号

网页设计中,在遇到需要在有限的范围内显示一些长文本或是段落时,让超出部分的文本以省略号的方式来显示是个不错的解决方案。之前看到很多案例是用后端或是 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 点:

  1. width 给放文本的标签添加宽度属性。
  2. white-space: nowrap; 禁止文本换行。
  3. overflow: hidden; 隐藏超出标签内容的显示。
  4. 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; 限制显示的行数。需要显示几行调整这个数字。