文字内容溢出自动换行或不换行方法（真的很详细）

在网页设计中，文本内容的显示方式对于用户体验至关重要。当文本内容超出其容器的边界时，如何处理这种情况是一个常见的问题。本文将解释文本内容溢出的基本概念，并介绍如何在CSS中实现自动换行。

概念解释

文本内容溢出指的是文本行的长度超出了其父容器的宽度，导致文本不再适应容器。如果不进行适当的处理，溢出的文本可能会覆盖其他元素，影响页面布局和可读性。

自动换行方法

CSS提供了几种方法来处理文本溢出，其中最常见的是使用 word-wrap（以前称为 overflow-wrap）属性来实现自动换行。

word-wrap 属性

word-wrap 属性用于设置当文本溢出其容器时是否允许自动换行。以下是几种可能的值：

• normal：默认值，仅在允许断行的地方断行（例如，空格或连字符）。
• break-word：允许在单词内断行，即使没有空格或连字符。

示例代码

.container {
  width: 300px; /* 设置容器宽度 */
  border: 1px solid #000; /* 边框用于展示容器边界 */
}

.break-word {
  word-wrap: break-word; /* 允许在单词内断行 */
}

<div class="container">
  这是一个示例文本，它将展示自动换行的效果。Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>

<div class="container break-word">
  这是一个示例文本，它将展示自动换行的效果，即使在没有空格的地方也会断行。Thisistoolongtofitinline。
</div>

效果展示

上述代码创建了两个容器，其中包含相同长度的示例文本。第一个容器将展示默认的换行行为，而第二个容器应用了 break-word 类，将展示自动换行效果，即使文本中没有空格。

不换行方法

white-space 属性

CSS 的 white-space 属性用于设置如何处理元素内的空白（包括换行、空格和制表符）。它有几个不同的值，可以用来阻止文本换行：

• normal：默认值，空白符会被合并，但不会阻止换行。
• nowrap：文本不会换行，即使超出容器宽度也会连续显示。
• pre：保留空白符，文本不会自动换行，类似于 pre 标签的文本。

示例代码

.container {
  width: 300px;
  border: 1px solid #000;
}

.no-wrap {
  white-space: nowrap; /* 阻止文本换行 */
}

<div class="container no-wrap">
  这是一个示例文本，它将展示不换行的效果。即使文本很长，也会在一行内显示，不会自动换行。
</div>

效果展示

上述代码中的 .container 设置了固定宽度，并应用了 no-wrap 类，该类通过 white-space: nowrap; 属性阻止了文本换行。

使用场景

自动换行与不换行的选择

选择自动换行还是不换行取决于具体的使用场景和设计需求：

• 自动换行：当容器宽度不足以显示完整文本时，自动换行可以确保文本不会溢出容器，适用于大多数段落文本和需要保持布局整洁的情况。
• 不换行：在某些特定情况下，如显示电话号码、URL 或需要保持格式的文本时，不换行可能更合适。此外，当需要文本在一行内水平滚动时，也可以使用不换行。

示例代码

.container {
  width: 300px;
  border: 1px solid #000;
}

.pre-wrap {
  white-space: pre-wrap; /* 保留空白符并允许自动换行 */
}

<div class="container pre-wrap">
  这是一个示例文本，它将展示保留空白符的效果。
  Line1 Line2 Line3
</div>

效果展示

在上述代码中，.pre-wrap 类通过 white-space: pre-wrap; 属性保留了文本的空白符，并在必要时自动换行。这适用于需要保留格式和空格的文本，如代码块或诗歌。

属性值详解

white-space 属性值

white-space 属性在CSS中用于控制元素内的空白符（包括空格、制表符、换行符等）的处理方式。以下是一些常用的值及其效果：

• normal：默认值。空白符会被合并，并且会在适当的地方换行。
• nowrap：不会合并空白符，但不允许自动换行。文本会在同一行上不断延伸，直到遇到元素的边界。
• pre：保留所有的空白符，并且不会自动换行。文本的显示效果类似于 pre 标签内的文本。
• pre-wrap：保留所有的空白符，并且允许自动换行。这使得文本在必要时可以换行，同时保留空格和制表符。
• pre-line：合并空白符，但是允许自动换行。这允许文本在必要时换行，但不会保留多余的空格和制表符。

示例代码

.container {
  width: 300px;
  border: 1px solid #000;
  padding: 10px;
}

.normal {
  white-space: normal;
}

.nowrap {
  white-space: nowrap;
}

.pre {
  white-space: pre;
}

.pre-wrap {
  white-space: pre-wrap;
}

.pre-line {
  white-space: pre-line;
}

<div class="container normal">
  This is a normal text. It will wrap at the end of the line.
</div>
<div class="container nowrap">
  This is a no-wrap text. It will not wrap even if it's too long for the line.
</div>
<div class="container pre">
  This is a pre text.
  It retains whitespace.
</div>
<div class="container pre-wrap">
  This is a pre-wrap text.\nIt retains whitespace and wraps if needed.
</div>
<div class="container pre-line">
  This is a pre-line text.\nIt collapses whitespace but wraps if needed.
</div>

效果展示

上述代码展示了 white-space 不同值的效果。

YDUIbuilder：低代码平台，文本布局效果一键掌控

 开源免费下载：yduibuilder: 快速开发UI界面，原型设计即前端开发

YDUIbuilder低代码平台，轻松掌握文本布局的艺术。无需深入编码，通过直观的界面操作，你可以自由设置`white-space`属性，无论是实现自动换行、保持空白符，还是完全阻止文本溢出。YDUIbuilder支持一键调整文本显示效果，确保内容在不同设备和屏幕尺寸上均保持完美展示。高效、直观、响应式设计，尽在YDUIbuilder。

YDUIbuilder开源免费低代码平台视频案列演示：

YDBUilder可视化开发前端界面之懂车帝小程序 热门界面