在前端开发中，我们经常需要截断文本内容并用省略号来表示。大多数情况下，省略号会出现在文本的右侧边缘。但是，在某些情况下，我们可能需要在左侧边缘显示省略号。本文将介绍如何使用 CSS 实现这一功能。
实现方法
实现在文本左侧显示省略号的方法与在右侧显示类似。我们可以使用 text-overflow CSS 属性来控制文本溢出时的处理方式。默认情况下，该属性值为 clip，表示文本超出容器边界时将被裁剪。如果我们将其设置为 ellipsis，则超出边界的文本将以省略号的形式显示。
-------------- ---------
然而，这样做只能让省略号出现在文本末尾。要让省略号出现在文本的左侧，我们还需要借助其他 CSS 属性。
首先，我们需要设置容器的宽度和 overflow 属性。这样可以让文本在容器边界内自动换行，并在容器宽度不足时产生溢出部分。
---------- - ------ ------ --------- ------- -
接着，我们需要为文本设置一个内边距，以便在容器边界内留出空间用于显示省略号。
----- - ------------- ----- -
最后，我们可以使用 ::before 伪元素来添加省略号。通过设置其内容为省略号，并将其定位在文本左侧，我们可以轻松地实现这一效果。
------------- - -------- ------ --------- --------- ----- -- -
示例代码
以下是一个完整的示例代码，它演示了如何在文本左侧显示省略号：
--------- -----
------
------
-------
---------- -
------ ------
--------- -------
-
----- -
------------- -----
--------- ---------
-
------------- -
-------- ------
--------- ---------
----- --
-
--------
-------
------
---- ------------------
-- ------------------ ----- ----- --- ----- ----------- ---------- ----- --- ------- ------ --- ---- -------- -- ------ ----- -----------
------
-------
-------总结
在本文中，我们介绍了如何使用 CSS 实现在文本左侧显示省略号的效果。通过设置容器的宽度和 overflow 属性、为文本设置内边距，并使用 ::before 伪元素添加省略号，我们可以轻松地实现这一功能。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25916