CSS 超出显示省略号

发布时间：2023-05-21

在前端开发中，经常需要对一些过长的文本进行缩略显示，这时候就需要用到 CSS 的超出显示省略号的功能。本文将从多个方面对该功能做详细的阐述。

1、基础用法

CSS 的超出显示省略号功能是通过 text-overflow 属性实现的。该属性有三个可选值：clip、ellipsis 和 string。其中，clip 表示超出部分被剪切掉不显示；ellipsis 表示超出部分显示为省略号；string 表示超出部分显示为指定的字符串。 在使用时需要将 text-overflow 属性与 white-space 和 overflow 属性一起使用。white-space 属性用来设置文字的换行方式，通常设置为 nowrap。overflow 属性用来设置超出部分的显示方式，通常设置为 hidden。

<div class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

上述代码就可以将 div 中的文本超出部分显示为省略号。

2、不同方向的超出处理

在某些情况下，需要在不同方向上进行超出的处理，例如一个表格中的文本，需要在左、右两侧都进行省略处理。 这时候可以使用 direction 属性来指定文本的排列方向。该属性有两个可选值：ltr 和 rtl。ltr 表示文本从左向右排列，rtl 表示文本从右向左排列。同时，还可以使用 unicode-bidi 属性对文本进行双向处理。

<td class="ellipsis">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</td>

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: rtl;
    unicode-bidi: bidi-override;
}

上述代码就可以将表格中的文本在左右两侧都进行省略显示。

3、支持多行超出显示

前两部分介绍的均是针对单行文本进行超出显示省略号的方式，但是在实际开发中，有些文本可能会超出多行。 在这种情况下，我们可以使用该文本所在元素的伸缩性来控制文本的高度，并使用 -webkit-line-clamp 属性来控制超出部分的省略显示。同时，需要将 overflow 属性设置为 hidden。

<div class="ellipsis-2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in odio ut quam hendrerit sagittis ut sed sapien.
</div>

.ellipsis-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

上述代码可以将 div 中的文本超出两行部分显示为省略号。

4、超出部分添加提示信息

在实际开发中，有一些情况下需要将超出部分的内容隐藏起来，但是需要提供一个提示信息，让用户知道还有内容没有显示出来。 这时候可以在超出部分的下方添加一个提示元素，并使其部分覆盖超出部分。具体实现可以使用绝对定位来控制元素的位置。

<div class="ellipsis-3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<span class="ellipsis-tip">...</span>

.ellipsis-3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
.ellipsis-tip {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 4px;
}

上述代码可以将 div 中的文本超出部分下方添加一个提示信息。

5、结语

以上就是 CSS 超出显示省略号的一些常见应用。通过以上的介绍，相信大家已经可以熟练使用这些技巧来实现文本的缩略显示了。

推荐文章