在
CSS 中实现文字
换行与省略号显示，可以根据具体需求选择不同的样式属性组合。以下是几种常见场景的实现方式：
### 单行文本不
换行并显示省略号
如果希望文本只在一行显示，并且当内容超出容器宽度时显示省略号（`...`），可以使用以下样式：
```
css
.ellipsis {
width: 250px; /* 定义容器的宽度 */
white-space: nowrap; /* 确保文本在一行显示 */
overflow: hidden; /* 隐藏超出容器的文本 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
```
此方法适用于单行文本截断，确保内容不会
换行，超出部分以省略号表示[^2]。
---
### 多行文本不
换行并显示省略号
如果希望文本在多行显示，但超出指定行数时显示省略号，可以使用 `-webkit-line-clamp` 属性。该方法适用于现代浏览器，尤其是基于 WebKit 的浏览器（如 Chrome 和 Safari）：
```
css
.multi-line-ellipsis {
display: -webkit-box; /* 旧版弹性盒子模型 */
-webkit-box-orient: vertical; /* 内容垂直排列 */
-webkit-line-clamp: 3; /* 限制显示行数 */
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
```
该方法适用于需要控制文本显示为多行但又不希望内容完全展开的场景，例如卡片式设计中的描述文本[^1]。
---
### 控制文本
换行方式
CSS 提供了 `white-space` 属性来控制空白符和
换行符的处理方式。常见的值包括：
- `normal`：默认值，空白符会被浏览器忽略，文本自动
换行。
- `nowrap`：文本不会
换行，所有内容将在一行显示，直到遇到 `<br>` 标签。
- `pre`：空白符会被保留，类似于 HTML 中的 `<pre>` 标签。
- `pre-wrap`：空白符会被保留，同时允许自动
换行。
- `pre-line`：空白符序列会被合并，但
换行符会被保留。
例如，以下样式可以保留空白符并允许自动
换行：
```
css
.pre-wrap {
white-space: pre-wrap;
}
```
此方法适用于需要保留格式的文本内容，例如代码块或日志信息[^4]。
---
### 单词级别的
换行控制
如果希望控制单词内部的
换行行为，可以使用 `word-break` 和 `overflow-wrap`（或 `word-wrap`）属性：
- `word-break: break-all;`：允许在单词内部
换行，适用于长单词或 URL。
- `overflow-wrap: break-word;`：仅在单词无法在一行显示时才
换行。
例如：
```
css
.break-word {
word-break: break-all;
overflow-wrap: break-word;
}
```
此方法适用于防止内容溢出容器，同时保持可读性[^4]。
---
### 总结
根据不同的需求，可以选择以下方式：
- 单行省略：使用 `white-space: nowrap; overflow: hidden; text-overflow: ellipsis;`。
- 多行省略：使用 `-webkit-line-clamp` 和 `display: -webkit-box`。
- 控制
换行：使用 `white-space` 属性。
- 单词
换行：使用 `word-break` 和 `overflow-wrap`。
---
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
264
