在前端开发中，经常需要对一些过长的文本进行缩略显示，这时候就需要用到 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 超出显示省略号的一些常见应用。通过以上的介绍，相信大家已经可以熟练使用这些技巧来实现文本的缩略显示了。
原创文章，作者：YSLJW，如若转载，请注明出处：https://www.506064.com/n/334507.html
微信扫一扫 
支付宝扫一扫 