如何在 HTML/CSS 中不使用 br 標籤換行?


在 HTML/CSS 中不使用 br 標籤換行,在您希望元素之間有空格但又不想新增新文字行的情況下非常有用。在這篇文章中,我們將討論兩種不同的方法來在不使用 br 標籤的情況下換行。

我們在本文的 HTML 文件中有一些文字內容,我們的任務是在 HTML/CSS 中不使用 br 標籤換行。

不使用 br 標籤換行的方法

以下是我們在本文中將討論的一些在 HTML/CSS 中不使用 br 標籤換行的方法,我們將逐步解釋並提供完整的示例程式碼。

使用 white-space 屬性換行

為了在 HTML/CSS 中不使用 br 標籤換行,我們使用了 CSS white-space 屬性,它控制元素內文字的空白流。

  • 我們在 container 類中使用了 "white-space: pre;" 屬性。
  • white-space 屬性的 pre 值會完全保留 HTML 程式碼中的空白。

示例

這是一個完整的示例程式碼,實現了上述步驟,使用 CSS white-space 屬性換行。

<html>
<head>
    <title>
        To Break a Line Without Using br 
        Tag in HTML/CSS
    </title>
    <style>
        .container {
            white-space: pre;
        }
    </style>
</head>
<body>
    <h3>
        To Break a Line Without Using br 
        Tag in HTML/CSS
    </h3>
    <p>
        In this example we have used CSS 
        <strong>white-space</strong> property
        to break a line without using br tag 
        in HTML/CSS.
    </p>
    <div class="container">
        First line
        Second line
    </div>
</body>
</html>

使用 pre 標籤換行

在這種不使用 br 標籤在 HTML/CSS 中換行的方法中,我們使用了 HTML pre 標籤。它定義了一個預格式化的文字,該文字會完全按照 HTML 程式碼中編寫的形式顯示,保留換行符。

示例

這是一個完整的示例程式碼,實現了上述步驟,使用 HTML pre 標籤換行。

<html>
    <head>
        <title>
            To Break a Line Without Using br 
            Tag in HTML/CSS
        </title>
    </head>
<body>
    <h3>
        To Break a Line Without Using br 
        Tag in HTML/CSS
    </h3>
    <p>
        In this example we have used HTML 
        <strong>pre</strong> tag to break 
        a line without using br tag in 
        HTML/CSS.
    </p>
    <pre>
        First line
        Second line
    </pre>
</body>
</html>

結論

在 HTML/CSS 中不使用 br 標籤換行是一個簡單的過程。在本文中,我們討論了兩種不同的方法:使用 CSS white-space 屬性和使用 HTML pre 標籤。

更新於: 2024-09-18

3K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.