CSS 文本溢出显示省略号的多种方法详解

前端

2024-01-03 15:00:52

概述

在前端开发中，文本溢出显示省略号是一种常见的需求。例如，在一个有限宽度的容器中，当文本内容超过容器宽度时，我们需要在文本末尾显示省略号 (...) 来表示文本内容被截断。CSS 提供了几种方法来实现文本溢出显示省略号，包括：

单行文本溢出
多行文本溢出
不同方向的文本溢出

单行文本溢出

text-overflow 属性

text-overflow 属性用于控制单行文本溢出的处理方式。它可以取以下几个值：

clip ：文本内容被截断，不显示省略号。
ellipsis ：文本内容被截断，在末尾显示省略号 (...)。
initial ：使用浏览器的默认设置。

示例

<div style="width: 100px; overflow: hidden;">
  <p>这是一段很长的文本内容，它将被截断并显示省略号。</p>
</div>

p {
  text-overflow: ellipsis;
}

上面的示例中，我们使用 text-overflow 属性将文本内容设置为在溢出时显示省略号。

white-space 属性

white-space 属性用于控制文本内容在容器内的排列方式。它可以取以下几个值：

normal ：文本内容以正常的空格排列。
nowrap ：文本内容不换行。
pre ：文本内容以预格式化的方式排列，保留所有空格和换行符。

示例

<div style="width: 100px; overflow: hidden; white-space: nowrap;">
  <p>这是一段很长的文本内容，它将被截断并显示省略号。</p>
</div>

p {
  text-overflow: ellipsis;
}

上面的示例中，我们使用 white-space 属性将文本内容设置为不换行。这样，即使文本内容超过容器宽度，也不会换行，而是在末尾显示省略号。

多行文本溢出

overflow 属性

overflow 属性用于控制元素的内容溢出方式。它可以取以下几个值：

visible ：内容溢出时可见。
hidden ：内容溢出时隐藏。
scroll ：内容溢出时出现滚动条。
auto ：浏览器根据需要自动选择可见、隐藏或滚动。

示例

<div style="width: 100px; height: 100px; overflow: hidden;">
  <p>这是一段很长的文本内容，它将被截断并显示省略号。</p>
</div>

p {
  text-overflow: ellipsis;
}

上面的示例中，我们使用 overflow 属性将元素的内容设置为隐藏。这样，当文本内容超过元素高度时，它将被截断并显示省略号。

text-overflow 属性

text-overflow 属性还可以用于控制多行文本溢出的处理方式。它可以取以下几个值：

clip ：文本内容被截断，不显示省略号。
ellipsis ：文本内容被截断，在末尾显示省略号 (...)。
initial ：使用浏览器的默认设置。

示例

<div style="width: 100px; height: 100px; overflow: scroll;">
  <p>这是一段很长的文本内容，它将被截断并显示省略号。</p>
</div>

p {
  text-overflow: ellipsis;
}

上面的示例中，我们使用 overflow 属性将元素的内容设置为出现滚动条。这样，当文本内容超过元素高度时，它将被截断并显示省略号，同时出现滚动条。

不同方向的文本溢出

direction 属性

direction 属性用于控制文本内容的书写方向。它可以取以下几个值：

ltr ：从左到右。
rtl ：从右到左。
initial ：使用浏览器的默认设置。

示例

<div style="width: 100px; height: 100px; overflow: hidden; direction: rtl;">
  <p>这是一段很长的文本内容，它将被截断并显示省略号。</p>
</div>

p {
  text-overflow: ellipsis;
}

上面的示例中，我们使用 direction 属性将文本内容的书写方向设置为从右到左。这样，当文本内容超过元素宽度时，它将从右向左截断并显示省略号。

text-overflow 属性

text-overflow 属性还可以用于控制不同方向文本溢出的处理方式。它可以取以下几个值：

clip ：文本内容被截断，不显示省略号。
ellipsis ：文本内容被截断，在末尾显示省略号 (...)。
initial ：使用浏览器的默认设置。

示例

<div style="width: 100px; height: 100px; overflow: scroll; direction: rtl;">
  <p>这是一段很长的文本内容，它将被截断并显示省略号。</p>
</div>

p {
  text-overflow: ellipsis;
}

上面的示例中，我们使用 overflow 属性将元素的内容设置为出现滚动条。这样，当文本内容超过元素高度时，它将从右向左截断并显示省略号，同时出现滚动条。

技巧和示例代码

使用 CSS3 实现更丰富的文本溢出效果

CSS3 提供了一些新的属性和值，可以帮助我们实现更丰富的文本溢出效果。例如，我们可以使用 text-overflow-mode 属性来控制文本内容在溢出时是如何被截断的。它可以取以下几个值：

clip ：文本内容被截断，不显示省略号。
ellipsis ：文本内容被截断，在末尾显示省略号 (...)。
line ：文本内容被截断到最近的行尾，并显示省略号。
word ：文本内容被截断到最近的单词尾部，并显示省略号。

使用 JavaScript 实现动态的文本溢出效果

我们可以使用 JavaScript 来实现动态的文本溢出效果。例如，我们可以使用 JavaScript 来检测文本内容的长度，并根据长度来显示或隐藏省略号。

示例代码

<div id="text-container" style="width: 100px; overflow: hidden;">
  <p>这是一段很长的文本内容，它将被截断并显示省略号。</p>
</div>

var textContainer = document.getElementById("text-container");
var textContent = textContainer.getElementsByTagName("p")[0];

// 检测文本内容的长度
var textLength = textContent.textContent.length;

// 如果文本内容的长度大于容器的宽度，则显示省略号
if (textLength > 100) {
  textContent.textContent = textContent.textContent.substring(0, 100) + "...";
}