網頁中的文字怎麼設定自動換行

這次帶給大家網頁中的文字怎麼設定自動換行，網頁中的文字設定自動換行注意事項有哪些，以下就是實戰案例，一起來看一下。

在網頁中，又會用來顯示一段文字，但預先並不知道，文字的長度及內容，此時，我們大多採用填入div或pre的方式來顯示文字。

使用div元素時，確定了寬度加上以下兩個屬性，即可保證填充在div中的文字自動換行。

word-wrap: break-word;   //word-wrap 属性允许长单词或 URL 地址换行到下一行。//break-word在长单词或 URL 地址内部进行换行。word-break: break-all;//word-break 属性规定自动换行的处理方法。

使用pre元素時，類似的，也加上以下兩個屬性，其內文字即可自動換行。

white-space: pre-wrap;    //pre-wrap保留空白符序列，但是正常地进行换行。word-break: break-all;
word-wrap: break-word;

div我們大家都熟悉，可以填滿文字或其它元素，但文字放在div中時，往往無法保持原始格式，例如空格,回車等。

pre 元素可定義預先格式化的文字。被包圍在 pre 元素中的文字通常會保留空格和換行符。而文字也會呈現為等寬字體。

pre 標籤的一個常見應用就是用來表示電腦的原始碼。

可以導致段落斷開的標籤（例如標題、p 和 address 標籤）絕不能包含在 pre 所定義的區塊裡。儘管有些瀏覽器會把段落結束標籤解釋為簡單地換行，但是這種行為在所有瀏覽器上並不都是一樣的。

pre 元素中允許的文字可以包括物理樣式和基於內容的樣式變化，還有連結、圖像和水平分隔線。當把其他標籤（例如 a 標籤）放到 pre 區塊中時，就像放在 HTML/XHTML 文件的其他部分一樣即可。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

React怎樣為button新增事件

#怎麼使用select取得選取的值

React中給div設定html

#

以上是網頁中的文字怎麼設定自動換行的詳細內容。更多資訊請關注PHP中文網其他相關文章！