css文字強制自動換行、強制不換行、英文單字強制斷行的方法，有範例(包含pre標籤的強制斷行)

使用css的方法，將文字強制自動斷行(不包含英文單字斷行)：

word-wrap:break-word;
word-break:normal;

 

上述方式遇到英文單字仍會完整顯示不斷行，如果需要在排版上將英文單字也強制斷行可以使用以下方法：

word-break:break-all;

 

如果不希望物件內的文字自動斷行，可以使用以下方法，讓文字強制不做任何斷行：

white-space:nowrap;

 

**以上方法適用於各種物件及表格中使用，但是對pre標籤無效，pre標籤物件需使用以下方法進行強制斷行，否則可能會因為文字過長而把pre標籤撐開。

white-space: pre-wrap;

 

**pre標籤物件雖然使用上面這行語法就可以實現強制斷行，但仍可能會對某些瀏覽器核心不起作用，因此我們習慣補上以下4行語法，讓整個強制換行的定義更完整。

white-space: -moz-pre-wrap; /* Mozilla Browser */
white-space: -pre-wrap; /* Opera Browser 4-6 */
white-space: -o-pre-wrap; /* Opera Browser 7 */
word-wrap: break-word; /* Internet Explorer Browser 5.5+ */

 

**在某些極端情況下，pre標籤物件同時使用上面5行語法仍可能會失靈，此時需再加上將pre標籤物件設定寬度來更強勢的鎖住內容寬度(此方法非必要，某些及特殊情況才會遇到)

width:500px; /* 寬度設定在500 */

 

範例1：
直接在表格的儲存格中設定，讓儲存格內的文字不要強制斷行：

<table>
    <tr>
        <td style="white-space:nowrap;">
            這裡是中英文非常長的文字，不要自動斷行，This is a book.
        </td>
    </tr>
</table>

 

範例2：
在div或class物件中設定讓物件內的文字強制斷行(包含單字強制斷行)：

DivName {
    word-break:break-all;
}

該圖片由James Osborne在Pixabay上發布