css文字自动换行

基础概念

CSS（Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、MathML等各种XML方言）文档样式的样式表语言。文字自动换行是指当文本内容超出其容器的宽度时，浏览器会自动将文本换行到下一行，以避免文本溢出容器。

类型

CSS提供了多种属性来控制文字的换行行为：

word-wrap/overflow-wrap：控制长单词或URL地址的换行行为。
- normal：只在允许的断字点换行。
- break-word：在长单词或URL地址内部换行。

white-space：控制空白符的处理和文本的换行。
- normal：合并多个空白符为一个，并正常换行。
- nowrap：不换行，文本会在同一行上继续，直到遇到<br>标签。
- pre：保留空白符序列，正常换行。
- pre-wrap：保留空白符序列，并正常换行。
- pre-line：合并多个空白符为一个，但保留换行符。
text-wrap：这是一个非标准的属性，但在一些浏览器中支持，用于控制文本的换行。

应用场景

网页布局：在网页设计中，经常需要控制文本的换行以适应不同的布局需求。
响应式设计：在不同设备和屏幕尺寸下，自动换行可以确保文本显示正常。
长文本显示：在显示长段落或长URL地址时，自动换行可以避免文本溢出。

常见问题及解决方法

问题：为什么文字没有自动换行？

原因：

容器宽度足够，文本没有超出。
CSS属性设置不正确。

解决方法：确保容器宽度有限，并且正确设置了CSS属性。例如：

.container {
  width: 300px; /* 设置容器宽度 */
  word-wrap: break-word; /* 或 overflow-wrap: break-word; */
}

问题：长单词或URL地址没有换行？

原因：默认情况下，浏览器不会在长单词或URL地址内部换行。

解决方法：使用word-wrap: break-word;或overflow-wrap: break-word;属性。例如：

.container {
  word-wrap: break-word; /* 或 overflow-wrap: break-word; */
}

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 文字自动换行示例</title>
  <style>
    .container {
      width: 300px;
      border: 1px solid black;
      word-wrap: break-word; /* 或 overflow-wrap: break-word; */
    }
  </style>
</head>
<body>
  <div class="container">
    这是一个非常长的单词，看看它是否会自动换行：supercalifragilisticexpialidocious
  </div>
</body>
</html>