如何使用CSS防止换行符

介绍

开发人员通常喜欢在网页上换行。环绕以一种或另一种方式约束文本并防止设计问题。文本换行还可以防止水平滚动。但有时您希望文本块保持在同一行，无论长度如何。您可以使用 CSS 空白属性防止特定元素的换行和文本换行。

在本教程中，您将以四种不同的方式设置同一文本块的样式，首先是换行符，然后是三次不换行符：

美杜莎鱼带状鲟鱼罪犯 blenny 秋刀鱼线帆白鲸鲟鱼。印度 mul mora cisco masu 三文鱼、roosterfish requiem 鲨鱼 longnose lancetfish bluefish red snapper Sacramento splittail Giant danio。

这将为您提供几个选项来包装或不包装您的文本。

先决条件

要完成本教程，您需要：

您选择的代码编辑器，例如 nano 或 Visual Studio Code
网络浏览器
熟悉 HTML 基础知识。您可以查看我们的教程系列如何使用 HTML 构建网站进行介绍。

第 1 步 - 在 CSS 中防止和强制换行

在这一步中，您将创建一个包含三个不同类的样式表。每个将不同地处理换行符：第一个将以默认方式中断文本，而第二个和第三个将强制文本不创建换行符和换行符。

首先，使用 nano 或您喜欢的编辑器创建并打开一个名为 main.css 的新文件：

nano main.css

添加以下内容，将介绍三个CSS类，它们使用了几个属性，包括white-space：

./main.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 属性处理 scrollable 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，然后将您的类应用于示例文本块：

./index.html

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>How To Prevent Line Breaks with 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&nbsp;banded&nbsp;killifish&nbsp;convict&nbsp;blenny&nbsp;saury&nbsp;threadsail&nbsp;beluga&nbsp;sturgeon.&nbsp;Indian&nbsp;mul&nbsp;mora&nbsp;cisco&nbsp;masu&nbsp;salmon,&nbsp;roosterfish&nbsp;requiem&nbsp;shark&nbsp;longnose&nbsp;lancetfish&nbsp;bluefish&nbsp;red&nbsp;snapper&nbsp;Sacramento&nbsp;splittail&nbsp;giant&nbsp;danio.</p>
</body>
</html>

您已将标准环绕样式分配给第一个文本块，将 nowrap 样式分配给第二个文本块，将 nowrap 即 hidden 和 ellipsis 分配给第三个文本块. 您已将 sammy-wrap 分配给第四个示例，但您通过将不间断空格 ( ) 直接插入 HTML 来覆盖默认换行。如果您需要在一次性情况下防止换行，那么不间断空格可以提供快速解决方案。

在网络浏览器中打开 index.html 并查看结果。您的四个文本块将如下所示：

美杜莎鱼带状鲟鱼罪犯 blenny 秋刀鱼线帆白鲸鲟鱼。印度 mul mora cisco masu 三文鱼、roosterfish requiem 鲨鱼 longnose lancetfish bluefish red snapper Sacramento splittail Giant danio。

您已成功自定义 CSS 属性以防止或允许以四种不同方式换行。

结论

在本教程中，您使用 CSS 来防止文本块上的换行符。您在框内设置了文本样式，然后添加了 white-space 属性以覆盖默认的文本换行。要了解有关处理文本换行和空白的更多信息，请考虑探索整个空白 CSS 属性。