简介
开发人员通常喜欢在网页上对文本进行换行。换行会以某种方式限制文本，防止设计问题。文本换行还可以防止水平滚动。但有时候，您希望文本块保持在同一行，不考虑长度。您可以使用 CSS 的 white-space 属性来防止特定元素的换行和文本换行。
在本教程中，您将以四种不同的方式对相同的文本块进行样式设置，首先是带有换行，然后是三次不带换行：
<p class="sammy-wrap" > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="sammy-wrap" > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p>
这将为您提供几种包装或不包装文本的选项。
先决条件
要完成本教程，您需要：
- 一个您喜欢的代码编辑器，如
nano或 Visual Studio Code - 一个网络浏览器
- 对 HTML 基础知识的了解。您可以查看我们的教程系列《如何使用 HTML 构建网站》来进行入门。
步骤 1 — 在 CSS 中阻止和强制换行
在这一步中，您将创建一个样式表，其中包含三种不同的类。每个类将以不同的方式处理换行：第一个将以默认方式断开文本，而第二个和第三个将强制文本不换行。
首先，使用 nano 或您喜欢的编辑器创建并打开一个名为 main.css 的新文件：
nano main.css
添加以下内容，其中将介绍使用几个属性（包括 white-space）的三个 CSS 类：
.sammy-wrap { border-radius: 6px; background-color: aliceblue; border: 2px dashed gray; max-width: 70%; padding: 1em; margin-bottom: .4em; } .sammy-nowrap-1 { border-radius: 6px; background-color: aliceblue; border: 2px dashed gray; max-width: 70%; padding: 1em; margin-bottom: .4em; white-space: nowrap; } .sammy-nowrap-2 { border-radius: 6px; background-color: aliceblue; border: 2px dashed gray; max-width: 70%; padding: 1em; margin-bottom: .4em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
您的第一个类是 .sammy-wrap。它定义了六个常见的 CSS 属性，包括 border-radius、background-color、border max-width、padding 和 margin-bottom。这个类将创建一个视觉框，但它不定义任何特殊的换行属性。这意味着它将以默认方式断开行。
您的第二个类是 .sammy-nowrap-1。它定义了与 .sammy-wrap 相同的框，但现在您添加了另一个属性：white-space。white-space 属性有许多选项，所有这些选项都定义了如何处理给定元素内的空白。在这里，您将 white-space 设置为 nowrap，这将防止所有换行。
您的第三个类是 .sammy-nowrap-2。它添加了 white-space 和另外两个属性：overflow 和 text-overflow。overflow 属性处理 可滚动溢出，即当元素内的内容超出该元素的边缘时发生的情况。overflow 属性可以使内容可滚动、可见或隐藏。您将 overflow 设置为 hidden，然后使用 text-overflow 属性添加了更多的自定义。text-overflow 可以帮助您向用户发出信号，表明有额外的文本被隐藏。您将其设置为 ellipsis，因此现在您的行既不会断开也不会延伸到框外。CSS 将隐藏溢出并用 ... 表示隐藏的内容。
保存并关闭文件。
现在您有了一个样式表，可以制作一个包含一些示例文本的简短 HTML 文件。然后，您将在浏览器中加载网页，并检查 CSS 如何防止换行。
步骤 2 — 创建 HTML 文件
在定义了 CSS 类之后，你可以将它们应用到一些示例文本中。
在你喜欢的编辑器中创建并打开一个名为 index.html 的文件。确保它与 main.css 放在同一个文件夹中：
nano index.html
添加以下内容，它将把 main.css 关联为你的 stylesheet，然后将你的类应用到一个示例文本块中：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>如何使用 CSS 防止换行</title> <link href="main.css" rel="stylesheet"> </head> <body> <p class="sammy-wrap" > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="sammy-nowrap-1"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="sammy-nowrap-2"> Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> <p class="sammy-wrap" > Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.</p> </body> </html>
你已经将标准的换行样式分配给了第一个文本块，将 nowrap 样式分配给了第二个，并将 nowrap 与 ellipsis 隐藏到了第三个中。你已经将 sammy-wrap 分配给了第四个示例，但是通过直接在 HTML 中插入不换行空格 ( ) 来覆盖了默认的换行。如果你需要临时防止换行，那么不换行空格可以提供一个快速的解决方案。
在 web 浏览器中打开 index.html 并查看你的结果。你的四个文本块将会显示如下：
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
Medusafish banded killifish convict blenny saury threadsail beluga sturgeon. Indian mul mora cisco masu salmon, roosterfish requiem shark longnose lancetfish bluefish red snapper Sacramento splittail giant danio.
你已成功地定制了你的 CSS 属性，以防止或允许四种不同的换行方式。
结论
在本教程中，你使用了 CSS 来防止文本块的换行。你为盒子内的文本添加了样式，然后添加了 white-space 属性来覆盖默认的文本换行。要了解更多关于处理文本换行和空白的内容，请考虑探索整个 white-space CSS 属性。
