剛剛入門前端的小伙伴肯定有遇到過需要將一整段文字換行顯示的情況,其實有好幾種方式可以實現,小千今天就來給大家介紹幾種常見的方式。
1.首先第一種方式就是在想要換行的文本處添加一個 "<br>" 標簽即可,想換幾行就添加幾次代碼即可。
2.使用<p>文字</p>代碼,段落文字會自動換行,需要多少行就需要添加多少次<p>代碼,注意這個代碼需要有關閉項也就是</p>結尾,否則無法生效。
3.通過一些編輯器當你按下回車鍵的時候編輯器會自動為你添加換行代碼,例如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專有屬性,同學們要記住了。
最后想要學習web前端的同學,可以參考千鋒web前端培訓班提供的web前端學習路線,該學習路線對從零基礎小白到web前端初級開發工程師,web前端高級開發工程師,后面的web前端大神級開發工程師都有一個明確清晰的指導,根據千鋒web前端培訓機構提供的web前端學習路線圖可以讓你對學習web前端開發需要掌握的知識有個清晰的了解,并快速入門web前端開發。想要獲取前端完整學習路線和免費的學習資料可以添加我們的web前端技術分享交流qq群:857920838 加群找群管理領取即可,等你來哦~~