如何在 HTML 中禁用自动换行?

htmlweb developmentfront end technology更新于 2025/3/26 22:04:17

自动换行是指自动将行末的单词移至新行，以使文本保持在页边距内的过程。在 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>

如我们所见，文本根据容器的边界进行换行，在本例中是 <div> 元素的宽度。

CSS white-space 属性

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

语法

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

其中，

正常:空白序列将合并为一个空格。必要时，文本将换行。这是标准设置。
不换行:所有空格序列将合并为一个空格。文本永远不会换行到下一行。文本会继续在同一行中运行，直到遇到 br> 标签。
行前换行:浏览器会保留空格。只有换行符会导致文本换行。
行前换行:所有空格序列将合并为一个空格。必要时，文本会绕过换行符。
行前换行:浏览器会保留空格。文本将根据需要换行，并在换行处换行。

在本教程中，我们将讨论如何使用 CSS whitespace 属性来防止 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>