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上发布