使用 CSS 将省略号添加到 DOM 元素

在 Web 开发中，我们有时候需要在文本超出容器宽度时添加省略号来表示截断。这种效果可以通过使用 CSS 来实现，而无需修改 DOM 结构或添加额外的 JavaScript 代码。本文将介绍如何使用 CSS 将省略号添加到 DOM 元素。

1. 使用 text-overflow 属性

text-overflow 属性是 CSS 的一个属性，它可以定义在容器内文本溢出时的处理方式。通过设置该属性的值为 ellipsis，我们可以让浏览器自动添加省略号。

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

在上面的代码片段中，.my-element 是要添加省略号的 DOM 元素的选择器。white-space: nowrap;使得元素内文本不换行，overflow: hidden; 隐藏超出容器宽度的内容，text-overflow: ellipsis; 添加省略号。

2. 添加省略号的条件

默认情况下，上述方式只会在元素内文本完全溢出时才会添加省略号。如果要添加一些条件逻辑，例如只当文本长度超过一定值时显示省略号，可以使用 CSS 的伪元素和伪类来实现。

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

.my-element:before {
  content: attr(data-text);
}

.my-element[data-text]:after {
  content: "...";
}

在上述代码中，我们使用了 before 伪元素来动态展示元素内的文本，并使用 after 伪类在文本溢出时添加省略号。当需要动态控制是否显示省略号时，我们可以通过添加或删除 data-text 属性来实现。

<div class="my-element" data-text="Hello World! This is a long text."></div>

在上面的例子中，当 .my-element 元素的文本超过容器宽度时，省略号将会显示在末尾。

3. 优化省略号的样式

省略号的样式可以使用 CSS 修改得更加美观。你可以使用 ::before 和 ::after 伪元素选择器来自定义省略号的样式，并使用其他 CSS 属性来控制它们的位置、大小、颜色等。

.my-element:before {
  content: "...";
  position: absolute;
  top: 0;
  right: 0;
  color: #999;
}

在上面的代码片段中，我们将省略号的颜色设置为灰色，并将其定位在容器的右上角。

结论

通过上述方法，我们可以使用 CSS 在元素内部文本溢出时添加省略号。这种技术非常实用，而且不需要额外的 JavaScript 代码。你可以根据需求定制省略号的样式，并通过条件逻辑来动态控制省略号的显示。

注意：text-overflow 属性在某些情况下可能无法正常工作，例如内联元素或使用了固定宽度的表格元素。在这些情况下，你可能需要使用其他技术来实现省略号效果。