你有这烦恼吗?教你巧用CSS，让文本超出就省略！

前端

2023-01-17 10:27:52

如何巧妙处理文本溢出：CSS和JavaScript解决方案

在网页设计中，文本内容扮演着至关重要的角色，但如何有效地展现文本内容，避免它超出预定空间，却是一个常见难题。CSS和JavaScript提供了多种解决方案，本文将深入探讨这些方法，帮助你轻松驾驭文本溢出问题。

CSS解决方案：

text-overflow 属性

text-overflow 属性允许我们指定当文本超出容器时如何处理多余部分。它有以下几种值：

clip: 超出部分被剪切，不显示任何内容。
ellipsis: 超出部分被省略，并用省略号(...)代替。
inherit: 继承父元素的 text-overflow 值。

使用 text-overflow 属性，我们可以轻松地让文本超出时显示省略号，代码示例如下：

.container {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

word-wrap 属性

word-wrap 属性控制文本是否在单词内部换行。它有以下几种值：

normal: 文本不会在单词内部换行。
break-word: 文本可以在单词内部换行。
inherit: 继承父元素的 word-wrap 值。

使用 word-wrap 属性，我们可以让文本在单词内部换行，以避免超出容器时被剪切。代码示例如下：

.container {
  width: 200px;
  overflow: hidden;
  word-wrap: break-word;
}

JavaScript解决方案：

动态省略

我们可以使用JavaScript来动态地省略文本内容，以确保文本的高度小于容器的高度。代码示例如下：

function truncateText(element, maxLength) {
  while (element.scrollHeight > maxLength) {
    element.textContent = element.textContent.substring(0, element.textContent.length - 1);
  }
}

var container = document.getElementById("container");
truncateText(container, 200);