简介
开发人员通常喜欢在网页上换行文本。换行以这样或那样的方式约束文本并防止设计问题。文本换行还可以防止水平滚动。但有时您希望文本块保持在同一行上，而不管长度如何。您可以使用css空白property.来防止特定元素的换行符和文本换行
在本教程中，您将使用四种不同的方式设置同一文本块的样式，第一次使用换行符，然后三次不换行符：
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.
这将为您提供几个换行或不换行文本的选项。
前提条件
要完成本教程，您需要：
- 您选择的代码编辑器，如
Nan或Visual Studio代码 - 网络浏览器
- 熟悉HTML基础知识。您可以查看我们的系列教程如何使用HTML构建网站》作为介绍。
步骤1&mdash；在css中防止和强制换行
在本步骤中，您将创建一个具有三个不同类的样式表。每种方法将处理不同的换行符：第一种方法将以默认方式换行，而第二种和第三种方法将强制文本不创建换行符和换行符。
首先，使用nan或您首选的编辑器创建并打开一个名为main.css的新文件：
1nano main.css
添加以下内容，其中将介绍三个使用多个属性的CSS类，包括white-space：
1[label ./main.css]
2.sammy-wrap {
3 border-radius: 6px;
4 background-color: aliceblue;
5 border: 2px dashed gray;
6 max-width: 70%;
7 padding: 1em;
8 margin-bottom: .4em;
9}
10.sammy-nowrap-1 {
11 border-radius: 6px;
12 background-color: aliceblue;
13 border: 2px dashed gray;
14 max-width: 70%;
15 padding: 1em;
16 margin-bottom: .4em;
17 white-space: nowrap;
18}
19.sammy-nowrap-2 {
20 border-radius: 6px;
21 background-color: aliceblue;
22 border: 2px dashed gray;
23 max-width: 70%;
24 padding: 1em;
25 margin-bottom: .4em;
26 white-space: nowrap;
27 overflow: hidden;
28 text-overflow: ellipsis;
29}
您的第一节课是.sammy-wrap。它定义了六个常见的css属性，包括edge-Radius、back-Color、edge max-width、padding、mark-bottom。此类将创建一个可视框，但它没有定义任何特殊的包装属性。这意味着它将以默认方式换行。
您的第二个类是.sammy-now rap-1‘。它定义了与.sammy-wap相同的box，但现在添加了另一个属性：White-space。White-space](https://developer.mozilla.org/en-US/docs/Glossary/whitespace)‘属性有许多选项，所有这些选项都定义了如何处理给定元素中的[白色空格。这里，您将White-space设置为nowRap，这将阻止所有的换行符。
您的第三个类是.sammy-now rap-2‘。它添加了白色空格‘和两个附加属性：overflow和text-overflow.overflow属性处理可滚动溢出，当元素内的内容超出该元素的边缘时就会发生这种情况。overflow‘属性可以使内容可滚动、可见或隐藏。您正在将overflow设置为idden，然后使用Text-overflow属性添加更多的定制。文本溢出可以帮助你向用户发出其他文本仍处于隐藏状态的信号。您已将其设置为‘省略’，因此现在您的线既不会中断，也不会延伸到框外。Css会隐藏溢出，并用...‘表示隐藏的内容。
保存并关闭您的文件。
现在您已经有了样式表，您就可以使用一些示例文本来创建一个简短的HTML文件了。然后，您将在浏览器中加载网页，并检查css如何防止换行。
第二步&mdash；创建HTML文件
定义了您的CSS类后，您可以将它们应用于一些示例文本。
在您的首选编辑器中创建并打开一个名为index.html的文件。请确保将其与main.css放在同一文件夹中：
1nano index.html
添加以下内容，该内容将关联main.css作为您的样式表，然后将您的类应用到示例文本块：
1[label ./index.html]
2<!DOCTYPE HTML>
3<html>
4<head>
5<meta charset="UTF-8">
6<title>How To Prevent Line Breaks with CSS</title>
7<link href="main.css" rel="stylesheet">
8</head>
9
10<body>
11<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>
12
13<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>
14
15<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>
16
17<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>
18</body>
19</html>
您已经将您的标准换行样式分配给了第一个文本块，将您的nowRap样式分配给了第二个文本块，并将nowRap指定给了第三个文本块。您已经将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属性来覆盖默认文本换行。要了解有关处理文本换行和空白的更多信息，请考虑探索整个‘空白’css property.