web前端換行程式碼的幾種實現方式!
剛剛入門前端的小夥伴肯定有遇到過需要將一整段文字換行顯示的情況,其實有好幾種方式可以實現,小千今天就來給大家介紹幾種常見的方式。
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/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- Web前端主題切換的幾種方案Web前端
- 程式碼迭代的幾種方式
- 簡單實現幾種常見的前端效果,附程式碼!前端
- Java建立多執行緒的幾種方式實現Java執行緒
- 實現 JavaScript 沙箱的幾種方式JavaScript
- AOP 有幾種實現方式?
- Laravel 幾種少用的排序方式程式碼Laravel排序
- 實現登入態的幾種方式
- 互動投影的幾種實現方式
- 分散式鎖的幾種實現方式分散式
- js實現繼承的幾種方式JS繼承
- 分散式鎖的幾種實現方式~分散式
- 淺析malloc()的幾種實現方式
- java幾種代理模式的實現方式Java模式
- 實現微前端的十種方式 【第一種】前端
- 實現微前端的十種方式 【第二種】前端
- CSS實現的換行效果程式碼CSS
- css實現水平垂直居中的幾種方式CSS
- 分散式事務的幾種實現方式分散式
- Android 截圖實現的幾種方式Android
- iOS實現幾種會用到的加密方式iOS加密
- javascript實現的繼承的幾種常用方式JavaScript繼承
- 【多執行緒高併發程式設計】二 實現多執行緒的幾種方式執行緒程式設計
- 實現web資料同步的四種方式Web
- 前端--實現隔行變色的兩種方式前端
- 幾種實現延時任務的方式(一)
- 三欄式佈局的幾種實現方式
- 實現繼承的幾種方式及工作原理繼承
- java定時任務實現的幾種方式Java
- 實現強制換行的CSS程式碼CSS
- Web前端------JS高階繼承的實現方式Web前端JS繼承
- 【.NET 6】多執行緒的幾種開啟方式和程式碼演示執行緒
- 兩種方式實現web html sliderWebHTMLIDE
- Linux shell:執行shell指令碼的幾種方式Linux指令碼
- 前端實現文字跑馬燈的三種方式前端
- css3實現動畫有幾種方式?CSSS3動畫
- 小結:二叉樹的幾種實現方式二叉樹
- js實現繼承的幾種方式和對比JS繼承