CSS Text Break Line Ellipsis

March 26, 2024 · 6 min read

Kimi Gao

Fullstack & AI

常用换行属性

在 CSS 中，处理文本过长自动换行的问题通常涉及到几个不同的属性，这些属性可以帮助你控制文本的显示方式，确保它们在容器内适当地换行。以下是一些关键的 CSS 属性，你可以用来管理文本换行：

word-wrap (或 overflow-wrap): 这个属性可以设置为 break-word，允许单词在需要时可以被拆分换行，以避免文本溢出容器。
```
word-wrap: break-word;
```

word-break: 这个属性在处理连续的非空白字符（如中文、日文或韩文文本）时特别有用，它可以设置为 break-all，允许在任意字符间断行。
```
word-break: break-all;
```
white-space: 这个属性控制空白字符（如空格、制表符、换行符）的处理方式。通常，你可能希望将其设置为 normal，这样空白字符就会按照正常的规则换行。
```
white-space: normal;
```
overflow: 当文本内容超出容器大小时，这个属性决定了如何处理溢出的内容。你可以将其设置为 auto 或 scroll，以便在文本溢出时提供滚动条。
```
overflow: auto;
```
text-overflow: 这个属性通常与 overflow: ellipsis 一起使用，用于在文本溢出时显示省略号（...），但只适用于单行文本。
```
overflow: hidden;
text-overflow: ellipsis;
```

结合使用这些属性，你可以有效地控制文本在容器内的换行行为。例如，如果你想确保文本在任何情况下都不会溢出容器，并且单词不会被拆分，你可以这样设置：

.element {
  word-wrap: break-word;
  word-break: normal;
  overflow: hidden;
  white-space: normal;
}

white-space: nowrap 和 pre-wrap

white-space: nowrap 和 white-space: pre-wrap 是 CSS 中用于控制空白字符如何处理的两个属性值，它们对于文本换行和空白的保留有不同的效果。

white-space: nowrap:
- 这个属性值用于阻止文本在容器内自动换行。
- 当文本内容超出容器宽度时，它会保持文本在一行内，即使这意味着文本会溢出容器边界。
- 这个属性通常用于确保文本不会中断，例如在表格单元格中或者当你想要文本在一个固定宽度的容器内显示时。
示例代码:
```
.element {
  white-space: nowrap;
}
```
white-space: pre-wrap:
- 这个属性值用于保留文本中的空白字符（包括空格、制表符、换行符等），并且允许文本在必要时自动换行。
- 它类似于 pre 标签的默认行为，但是与 pre 不同的是，pre-wrap 会保留文本的格式，同时允许文本根据容器的宽度进行换行。
- 这个属性非常适合处理包含代码、诗歌或其他需要保留空格和换行的文本。
示例代码:
```
.element {
  white-space: pre-wrap;
}
```

这两个属性值的选择取决于你希望文本如何显示。如果你不希望文本换行，即使它超出了容器的宽度，那么 nowrap 是合适的选择。如果你想要保留文本中的空白字符，并且希望文本能够根据容器大小自动换行，那么 pre-wrap 是更好的选择。

文字省略

在 CSS 中实现文字省略的效果，通常涉及到几个属性的组合使用，主要是overflow、text-overflow和white-space。以下是一个基本的实现文字省略的代码示例：

.element {
  overflow: hidden; /* 确保内容超出容器时不会显示滚动条 */
  text-overflow: ellipsis; /* 当内容超出容器宽度时，显示省略号(...) */
  white-space: nowrap; /* 防止文本换行，保持在一行显示 */
}

这段代码会使得.element类的元素在文本内容超出容器宽度时显示省略号，并且文本不会换行。

如果你想要文本在多行中显示省略号，可以将white-space属性设置为normal，并且可能需要配合display: -webkit-box;和-webkit-box-orient、-webkit-line-clamp属性来实现多行文本的省略效果。这需要浏览器的 Webkit 引擎支持，如下所示：

.element {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 限制在一个块元素显示的文本的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
}

这段代码会使得.element类的元素在文本内容超出指定行数（这里是 3 行）时，在最后一行显示省略号。

note

-webkit-line-clamp属性是 Webkit 和 Blink 引擎的私有属性，不是所有浏览器都支持。如果你需要在所有浏览器上实现类似的效果，可能需要使用 JavaScript 或者其他替代方案。

常用换行属性​

white-space: nowrap 和 pre-wrap​

文字省略​

常用换行属性

white-space: nowrap 和 pre-wrap

文字省略