Text-overflow ellipsis on left side-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要截断文本内容并用省略号来表示。大多数情况下，省略号会出现在文本的右侧边缘。但是，在某些情况下，我们可能需要在左侧边缘显示省略号。本文将介绍如何使用 CSS 实现这一功能。

实现方法

实现在文本左侧显示省略号的方法与在右侧显示类似。我们可以使用 text-overflow CSS 属性来控制文本溢出时的处理方式。默认情况下，该属性值为 clip，表示文本超出容器边界时将被裁剪。如果我们将其设置为 ellipsis，则超出边界的文本将以省略号的形式显示。

text-overflow: ellipsis;

然而，这样做只能让省略号出现在文本末尾。要让省略号出现在文本的左侧，我们还需要借助其他 CSS 属性。

首先，我们需要设置容器的宽度和 overflow 属性。这样可以让文本在容器边界内自动换行，并在容器宽度不足时产生溢出部分。

.container {
  width: 200px;
  overflow: hidden;
}

接着，我们需要为文本设置一个内边距，以便在容器边界内留出空间用于显示省略号。

.text {
  padding-left: 20px;
}

最后，我们可以使用 ::before 伪元素来添加省略号。通过设置其内容为省略号，并将其定位在文本左侧，我们可以轻松地实现这一效果。

.text::before {
  content: "...";
  position: absolute;
  left: 0;
}

示例代码

以下是一个完整的示例代码，它演示了如何在文本左侧显示省略号：

-- -------------------- ---- -------
--------- -----
------
------
  -------
    ---------- -
      ------ ------
      --------- -------
    -
    ----- -
      ------------- -----
      --------- ---------
    -
    ------------- -
      -------- ------
      --------- ---------
      ----- --
    -
  --------
-------
------
  ---- ------------------
    -- ------------------ ----- ----- --- ----- ----------- ---------- ----- --- ------- ------ --- ---- -------- -- ------ ----- -----------
  ------
-------
-------

总结

在本文中，我们介绍了如何使用 CSS 实现在文本左侧显示省略号的效果。通过设置容器的宽度和 overflow 属性、为文本设置内边距，并使用 ::before 伪元素添加省略号，我们可以轻松地实现这一功能。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/25916