如何在HTML中禁用自动换行

自动换行 是指将一行末尾的单词自动移到新的一行，以使文本保持在边界内。在HTML中，这意味着元素内的文本会根据该元素的边界进行换行。

示例

让我们来考虑一个示例，我们有一个带有一些文本的<div>元素，并且它被设置为固定宽度。

<!DOCTYPE html>
<html>
  <head>
      <style>
          div{
              margin:20px;
              background-color:lightblue;
              width:90px;
          }
      </style>
  </head>
  <body>
    <div>
        Hi there, Have a good day!
    </div>
  </body>
</html>

如我们所见，文本的换行是根据容器的边界来确定的，这里的容器是

元素的宽度。

CSS的white-space属性

CSS的white-space属性用于控制元素内部的空白处理方式。空白通常指空格序列或换行。该属性可以应用于任何元素的内联内容。额外指定的空格会合并成一个，换行符会被移除，文本行会被断行并换行以适应其容器内。

语法

white-space: normal|nowrap|pre|pre-line|pre-wrap

在这里，

normal： 空格序列将被合并为一个空格。如果需要，文本将被换行。这是标准设置。
NoWrap： 空格序列将被合并为一个空格。文本将永远不会被换行到下一行。文本会继续在同一行上，直到遇到br>标签为止。
pre： 浏览器会保留空格。只有换行会导致文本换行。
pre-line： 空格序列将被合并为一个空格。如果需要，文本将围绕换行符换行。
pre-wrap： 浏览器会保留空格。文本将按需换行，并在换行符处换行。

在本教程中，我们将讨论如何使用CSS空白属性来防止HTML中的单词换行。

使用white-space:nowrap属性

当CSS white-space属性设置为nowrap时，两个或更多的空格序列将显示为一个空格。除非显式指定，元素的内容不会被换行到新的行。

示例

下面的示例演示了如何使用whitespace属性的“nowrap”值禁用单词换行。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Disable Word Wrapping in HTML?</title>
    <style>
      .container{
        width:300px;
        height:30px;
        background-color:linen;
        white-space: nowrap;
      }
      p{
          font-size:12px;
      }
    </style>
  </head>
  <body>
    <h3>An inspiring quote</h3>
    <div class="container">
        Winning is not necessarily finishing first but finishing well, to the best of your God-given   abilities. When you embrace this concept in your life, you will be relieved from the stress of competing to finish first, to win in life.
    </div>
    <p>Note: Word wrapping is disabled here</p>
  </body>
</html>

使用 white-space:pre

在上面的示例中，有几个换行符允许文本单独显示（在代码中）。当文本在浏览器中呈现时，换行符似乎被删除了。第一个字母之前的额外空格也被删除了。我们可以使用 white-space: pre 强制浏览器显示这些换行符和额外的空格字符。

它被称为 pre，是因为它的行为与文本被包裹在<pre></pre>标签中相同（默认情况下处理空格和换行符）。空格以与HTML中相同的方式被尊重，并且文本在代码中存在换行符之前不换行。这在显示代码时特别有用，从美学上有一些格式要求。

例子

下面的例子演示了如何使用 whitespace 属性的 “pre” 值禁用自动换行。

<!DOCTYPE html>
<html>
  <head>
    <title>How to Disable Word Wrapping in HTML?</title>
    <style>
      .container{
        width:400px;
        height:30px;
        background-color:aliceblue;
        border:1px solid azure;
        white-space: pre;
      }
      p{
          margin-top:20px;
          font-size:13px;
      }
    </style>
  </head>
  <body>
    <h3>Talk more, Type less</h3>
    <div class="container">
        People often undervalue the positive impact on their relationships by speaking versus text alone. So, if you’ve been putting off having a difficult conversation or you’re just more comfortable sending a written message, take a moment to consider whether it might be more fruitful to rise above your discomfort and brave a real conversation instead. 
    </div>
    <p>Note: Word wrapping is disabled here</p>
  </body>
</html>