CSS 文本不換行的多方面闡述

一、文本不換行的基礎知識

CSS 中的 white-space 屬性可以用於控制文本的換行方式，它的基本語法如下：

    selector {
        white-space: normal | nowrap | pre | pre-wrap | pre-line | inherit;
    }

其中各取值的含義如下：

• normal：默認狀態，合併連續空白符，文本自動換行；
• nowrap：不允許文本換行，如果一行放不下會自動裁剪；
• pre：保留所有連續空白符，文本不換行，僅在遇到 <br> 等 tag 才進行換行；
• pre-wrap：保留所有連續空白符，文本自動換行；
• pre-line：合併連續空白符，文本自動換行，僅在遇到 <br> 等 tag 才進行換行；
• inherit：繼承父元素的 white-space 屬性。

除此之外，CSS 還提供了 word-break 和 word-wrap 屬性來控制單詞的換行方式，用於處理超長單詞造成的排版問題。

二、文本不換行在實際開發中的應用

在實際開發中，CSS 文本不換行經常用於處理代碼和段落的排版問題。

1. 代碼排版

在代碼排版中，我們通常使用 pre 標籤來保留代碼中的空格和縮進，避免代碼格式錯亂，示例代碼如下：

    <pre>
    .demo {
        font-size: 14px;
        color: #333;
        line-height: 1.5;
    }
    </pre>

2. 段落排版

在段落排版中，通常使用 nowrap 屬性來控制標題和名稱等不允許換行的元素，避免排版混亂，示例代碼如下：

    <p style="white-space: nowrap;">這是一段不允許換行的文本。</p>

除此之外，white-space 屬性還可以結合 overflow:hidden 來實現文本裁剪的效果，將多餘文本隱藏起來，避免頁面顯示異常，示例代碼如下：

    <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">這是一段文本，如果說它太長就將它保留一部分並添加省略號。</p>

三、文本不換行的其他應用場景

除了代碼排版和段落排版外，文本不換行還可以應用於表格、按鈕、導航等元素的排版中。

1. 表格排版

在表格排版中，如果單元格內的文本過長，使用 nowrap 屬性可以保證文本不換行，避免表格樣式錯亂，示例代碼如下：

    <table>
        <tr>
            <td style="white-space: nowrap;">這是一段不允許換行的文本。</td>
            <td>這是一個允許換行的單元格，文本會自動換行顯示。</td>
        </tr>
    </table>

2. 按鈕排版

在按鈕排版中，使用 white-space: nowrap; 和 display: inline-block; 可以讓按鈕寬度自適應其內容，同時按鈕內的文本不換行，示例代碼如下：

    <button style="white-space: nowrap; display: inline-block;">這是一個不允許換行的按鈕。</button>

3. 導航排版

在導航排版中，如果導航菜單過多且長度不一，可以使用 white-space: nowrap; 和 overflow: auto; 來實現水平滾動效果，示例代碼如下：

    <nav style="white-space: nowrap; overflow: auto;">
        <a href="#">首頁</a>
        <a href="#">產品中心</a>
        <a href="#">服務支持</a>
        <a href="#">客戶案例</a>
        <a href="#">關於我們</a>
    </nav>