CSS中的文字不換行顯示

一、CSS文字超出換行顯示

當一段文字的長度超過了其父元素的寬度，通常情況下會自動換行。但有時候我們需要讓文字把它的容器撐滿，而不會自動換行，這時需要使用下面的CSS屬性：

word-wrap: break-word;

這個屬性使得長單詞或URL在必要的時候可以自動換行，而不會出現在容器之外。

舉個例子：

<div style="width: 110px; border: 1px solid black; padding: 5px;">
    <p style="word-wrap: break-word;">這是一段超長的單詞：supercalifragilisticexpialidocious

</div>

可以看到這個例子的&P標籤中包含了不可能完全顯示在容器內的長單詞。當設置了word-wrap：break-word；屬性之後，單詞會在必要的時候被劃分為多行，並顯示完整內容。

二、CSS文字不顯示省略號

有時候我們需要讓一個容器內的文字保持在一行內且不顯示溢出部分，這時可以使用下面的CSS屬性：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

這些屬性將強制把一個元素內的文本限制在一行，並將超出部分截斷並用省略號來表示。這個屬性最常用於製作產品列表和新聞標題等。

舉個例子：

<div style="width: 100px; border: 1px solid black; padding: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">
    <p>This is a very long text that needs to be truncated

</div>

可以看到這個例子中的&P標籤內包含文字，在這個元素內，將超出部分隱藏，並在末尾添加省略號。

三、CSS使文字不換行

設置CSS使文字不換行非常簡單，只需要添加以下的CSS屬性：

white-space: nowrap;

這個屬性將文本的換行位置設置為未知，因此元素內的文本會一直在一行內顯示，即使它超出了容器的寬度。

舉個例子：

<div style="width: 100px; border: 1px solid black; padding: 5px; white-space: nowrap;">
    <p>This is a very long text that should not wrap

</div>

可以看到這個例子中的&P標籤內包含超出容器寬度的文字，但是由於我們使用了white-space：nowrap；屬性，所以文字會一直在同一行內顯示。

四、CSS文字超出不換行

「不換行」和「超出不換行」之間的區別在於標準的不換行屬性會自動的縮放超出容器的文本大小。如果我們不想要自動縮放文本，可以使用「超出不換行」的屬性。

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

這些屬性將文本的大小限制在元素內部，並用省略號來取代超出部分。

舉個例子：

<div style="width: 100px; border: 1px solid black; padding: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
    <p>This is a very long text that should not wrap and should be truncated

</div>

可以看到這個例子中的&P標籤內包含文字，在這個元素內，將超出部分隱藏，並在末尾添加省略號。

五、CSS不換行屬性

使用「white-space:no-wrap」屬性可以防止文本自動在不適當的位置折行。

舉個例子：

<div style="border: 1px solid #000;float: left;width: 300px;white-space:nowrap;">
    <p>No wrap該字元串不會被自動折行，不換行，而是在同一行中繼續向右延伸，直到達到父容器的右邊界。

</div>

可以看到這個例子中的&P標籤內包含字元串，在這個元素內，該字元串不會被自動折行，而是在同一行中繼續向右延伸，直到達到父容器的右邊界。

六、CSS設置不換行

使用「white-space:no-wrap」屬性可以防止文本自動在不適當的位置折行。

舉個例子：

<div style="border: 1px solid #000;float: left;width: 300px;white-space:nowrap;">
    <p>No wrap該字元串不會被自動折行，不換行，而是在同一行中繼續向右延伸，直到達到父容器的右邊界。

</div>

可以看到這個例子中的&P標籤內包含字元串，在這個元素內，該字元串不會被自動折行，而是在同一行中繼續向右延伸，直到達到父容器的右邊界。

七、CSS段落中文本不換行

如果需要在段落中插入代碼，需要保持該代碼不換行，可以使用以下的CSS屬性：

white-space: pre;

這個屬性將使文本保持原有的格式，意味著空格和換行符也會被保留。

舉個例子：

<div class="code" style="white-space: pre; font-family: monospace">
    <code>
        function foo() {
            return 'bar';
        }
    </code>
</div>

在這個例子中，我們將一個代碼塊插入到了一個div中，然後使用「white-space:pre」屬性來保持代碼不換行並且保留空格和換行符。

八、CSS強制不換行

我們可以使用這些屬性強制不換行：

word-break: keep-all;
white-space: nowrap;

這些屬性強制瀏覽器不換行文本，且不允許單詞在某個允許的分隔符之間分割。這個屬性適用於像中文這樣不使用空格來分隔單詞的語言。

舉個例子：

<p style="word-break: keep-all;white-space: nowrap;">這是一個中文頁面，不應該使用空格來分隔單詞。

在上面的例子中，整個Div中的文字都在同一行內顯示, 不換行。