css文字超过宽度自动换行

CSS 中，当文本内容的长度超过了其容器元素的宽度时，可以设置`white-space`属性来控制文本的换行方式。主要有三种值：

1. **normal** (默认): 文本会在单词之间换行，直到达到容器宽度，然后在下一行继续。如果有剩余的部分，会显示为省略号（`...`）。

2. **nowrap**: 文本不会换行，如果内容超长，会尝试调整字体大小或溢出容器外显示，取决于浏览器的行为和是否设置了`overflow`属性。

3. **pre**: 对于预格式化文本，每个单词都会保持在单独的一行上，直到遇到换行符或容器结束。

4. **pre-wrap 或 pre-line**: 类似于`normal`，但允许单词内断行，如果还有空间的话，下一个单词将开始新的一行。这通常用于电子邮件、代码块等场景。

你可以像下面这样设置样式：

.container {
   width: 200px;
   white-space: pre-wrap; /* 或者 pre-line */
}

相关问题

div内文字超过宽度自动换行

可以通过设置 CSS 属性 `word-wrap: break-word;` 或 `overflow-wrap: break-word;` 来实现 div 内文字超过宽度自动换行。具体代码示例如下：

div {
  width: 200px;
  word-wrap: break-word;
  /* 或者使用 overflow-wrap: break-word; */
}

以上代码将使 div 元素宽度为 200px，当内部文字超过宽度时会自动换行。

css 文字超出宽度不换行 显示...

要实现CSS文字超出宽度不换行并显示省略号（...），可以使用以下CSS属性和值组合：

1. 使用`white-space: nowrap;`来防止文字换行。
2. 使用`overflow: hidden;`来隐藏超出宽度的文字。
3. 使用`text-overflow: ellipsis;`来显示省略号。

例如，可以将以下CSS样式应用于需要实现该效果的元素：

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

这样，当文字超出元素的宽度时，将会显示省略号（...）来表示被隐藏的部分。请注意，这种效果在不同浏览器中的兼容性可能会有所差异，因此建议在使用之前进行兼容性测试。引用\[2\]
#### 引用[.reference_title]
- *1* [css文字宽度，超出部分显示省略号（...）](https://blog.csdn.net/lyf976229437/article/details/123681266)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [css文字超出宽度自动换行](https://blog.csdn.net/TwoBE9876/article/details/122129927)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]