首頁 > web前端 > html教學 > 網頁中的文字怎麼設定自動換行

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

php中世界最好的语言
發布: 2018-03-14 09:36:54
原創
9222 人瀏覽過

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

在網頁中,又會用來顯示一段文字,但預先並不知道,文字的長度及內容,此時,我們大多採用填入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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板