当文本内容超出容器的宽度限制时，我们通常需要将其截断并显示省略号来表明当前文字已经被截断。这种设计模式被广泛应用于各种前端应用程序中。那么如何实现在隐藏溢出的范围内显示点（…）呢？接下来我们就来看一下几种实现方式。
使用 CSS 属性 text-overflow
text-overflow 是一个 CSS 属性，用于设置文本内容的截断方式和省略号的显示位置。该属性只有在元素的 white-space 属性值为 nowrap 或 pre-wrap 时才会生效。
----- - ------------ ------- --------- ------- -------------- --------- -
上面代码中，white-space 属性的值为 nowrap，表示文本内容不换行；overflow 属性的值为 hidden，表示超过容器宽度的部分将被隐藏；text-overflow 属性的值为 ellipsis，表示当文本内容超出容器宽度后，在尾部显示省略号。
使用 text-overflow 实现可以很方便地完成文本截断和省略号的显示，但是该方式仅适用于单行文本的情况，如果需要处理多行文本，则需要考虑其他方案。
使用 JavaScript 计算文本宽度
在处理多行文本时，我们需要先获取文本的实际宽度，然后根据容器的宽度和行数计算出省略号的位置。我们可以通过 JavaScript 计算文本宽度来实现这一功能。
----- - -------- ------------ ------------------- -- ------------------- --------- --------- ------- - ------------ - -------- ------ -
上面代码中，使用 display 属性设置元素为块级容器，并使用 -webkit-box 和 -webkit-box-orient 属性将文本显示为两行垂直排列的形式。然后使用 ::after 伪元素在文本内容末尾添加省略号。由于该方案需要计算文本的实际宽度，所以可能会影响性能，特别是在处理大量文本时更为明显。
使用 CSS 多列布局
还可以使用 CSS 多列布局来实现多行文本截断和省略号的显示。该方案通过将文本内容拆分成多列来实现，从而实现截断和省略号的效果。
----- - ------------- ------ ----------- -- - ------------ - -------- ------ --------- --------- ------ -- ------- -- ------ ------ ----------- ------- -
上面代码中，使用 column-width 属性将文本内容分成固定宽度的列，并使用 column-gap 属性将列与列之间的间隔设置为 0。然后使用 ::after 伪元素在最后一列文本内容末尾添加省略号，并使用 position 和 right/bottom 属性将其定位到容器的右下角。
总结
以上便是几种实现在隐藏溢出的范围内显示点（…）的方法，每种方案都有其适用场景和优缺点。在实际应用中，我们需要根据具体情况选择合适的方案来实现文本截断和省略号的显示效果。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10351