web前端換行程式碼的幾種實現方式!

千鋒武漢發表於2021-03-29

剛剛入門前端的小夥伴肯定有遇到過需要將一整段文字換行顯示的情況,其實有好幾種方式可以實現,小千今天就來給大家介紹幾種常見的方式。

1.首先第一種方式就是在想要換行的文字處新增一個 "<br>"  標籤即可,想換幾行就新增幾次程式碼即可。

2.使用<p>文字</p>程式碼,段落文字會自動換行,需要多少行就需要新增多少次<p>程式碼,注意這個程式碼需要有關閉項也就是</p>結尾,否則無法生效。

3.透過一些編輯器當你按下Enter鍵的時候編輯器會自動為你新增換行程式碼,例如Dreamweaver等等。

4.使用CSS樣式表進行文字的控制換行,中文和英文是不一樣的。

1)word-break:break-all.只對英文起作用,以字母作為換行依據

2)word-wrap:break-word. 只對英文起作用,以單詞作為換行依據

3)white-space:pre-wrap.只對中文起作用,強制換行

4)white-space:nowrap.強制不換行,都起作用

5)white-space:nowrap;overflow:hidden;text-overflow:ellipsis;不換行,超出部分隱藏且以省略號形式出現。

注意這裡的屬性都需要為容器設定寬度,否則是無法生效的。且word-break為IE5專有屬性,同學們要記住了。


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2765390/,如需轉載,請註明出處,否則將追究法律責任。

相關文章