CSS換行和不換行
強制不換行
div{
white-space:nowrap;
}
自動換行
div{
word-wrap: break-word;
word-break: normal;
}
強制英文單詞斷行
div{
word-break:break-all;
}
超出顯示省略號
p{text-overflow:ellipsis;overflow:hidden;}
white-space: normal|pre|nowrap|pre-wrap|pre-line|inherit;
white-space 屬性設定如何處理元素內的空白
normal 預設。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 HTML 中的 pre 標籤。
nowrap 文字不會換行,文字會在在同一行上繼續,直到遇到 br 標籤為止。
pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合併空白符序列,但是保留換行符。
inherit 規定應該從父元素繼承 white-space 屬性的值。
word-wrap: normal|break-word;
word-wrap 屬性用來標明是否允許瀏覽器在單詞內進行斷句,這是為了防止當一個字串太長而找不到它的自然斷句點時產生溢位現象。
normal: 只在允許的斷字點換行(瀏覽器保持預設處理)
break-word:在長單詞或URL地址內部進行換行
word-break: normal|break-all|keep-all;
word-break 屬性用來標明怎麼樣進行單詞內的斷句。
normal:使用瀏覽器預設的換行規則。
break-all:允許再單詞內換行
keep-all:只能在半形空格或連字元處換行
相關文章
- css實現強制不換行/自動換行/強制換行CSS
- css中實現強制不換行/自動換行/強制換行CSS
- 【轉】css樣式自動換行(強制換行)CSS
- css li元素中的文字超出隱藏不換行效果CSS
- 回車和換行
- CSS 塊級元素和行內元素和行內塊元素 及其相互轉換CSS
- 微信小程式text元件和view元件不換行微信小程式元件View
- CSS文字超出寬度---換行總結CSS
- Linux 轉換換行符Linux
- 不同瀏覽器下word-wrap,word-break,white-space強制換行和不換行總結瀏覽器
- css中經遇到的文字換行問題CSS
- 皕傑報表換行和行間距
- excel換行Excel
- python-換行Python
- JavaScript 字串換行JavaScript字串
- 【換行符】Windows、Unix、Mac不同作業系統的回車符 和換行符 WindowsMac作業系統
- grep 匹配製表符 和 換行符
- git 輸入換行Git
- DATAGUARD強行切換
- 換行符處理
- Java 檔案換行符識別與轉換Java
- 如何在 PHP 中換行PHP
- vim顯示換行符
- 自動換行excel裡面哪個鍵 excel換行按什麼鍵Excel
- excel一個框裡怎麼換行 excel表格的文字怎麼換行Excel
- Label和input實現純CSS切換CSS
- 強制換行快捷鍵ctrl加什麼 wordexcel換行快捷鍵是什麼Excel
- vue 表頭指定字元換行Vue字元
- canvas 如何自動去換行Canvas
- python輸出如何不換行?Python
- python輸出時如何換行Python
- 換電行業起風了行業
- 輸入框換行問題
- 回車與換行的故事
- ps中如何進行畫素和釐米轉換
- 塊元素和行內元素的區別與轉換
- 好程式設計師web前端分享HTML元素強制不換行程式設計師Web前端HTML
- 程式執行緒篇——執行緒切換(上)執行緒