這次帶給大家網頁中的文字怎麼設定自動換行,網頁中的文字設定自動換行注意事項有哪些,以下就是實戰案例,一起來看一下。
在網頁中,又會用來顯示一段文字,但預先並不知道,文字的長度及內容,此時,我們大多採用填入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中文網其它相關文章!
推薦閱讀:
#以上是網頁中的文字怎麼設定自動換行的詳細內容。更多資訊請關注PHP中文網其他相關文章!