柚子快報(bào)邀請(qǐng)碼778899分享：css3 前端 css文字換行

http://yzkb.51969.com/

目錄

一、英文或數(shù)字

word-warp

word-break

二、文本

white-space

tips

三、單行文本超出隱藏并顯示省略號(hào)

四、多行文本超出隱藏并顯示省略號(hào)

一、英文或數(shù)字

word-warp

設(shè)置或檢索當(dāng)內(nèi)容超過指定容器的邊界時(shí)是否斷行

屬性值說明normal自動(dòng)換行（默認(rèn)值，只在允許的斷字點(diǎn)換行）break-word 強(qiáng)制換行(決定是否允許單詞(abcdefj)內(nèi)斷句的。如果不允許的話，長單詞就會(huì)溢出。最重要的一點(diǎn)是它還是會(huì)首先嘗試挪到下一行，看看下一行的寬度夠不夠，不夠的話再進(jìn)行單詞內(nèi)的斷句。 以單詞作為換行依據(jù)

word-break

屬性值說明normal自動(dòng)換行（默認(rèn)值）break-all 允許在單詞內(nèi)換行(不會(huì)嘗試把長單詞挪到下一行，而是直接就進(jìn)行單詞內(nèi)的斷句。 以字母作為換行依據(jù) keep-all只能在半角空格或連字符處換行

二、文本

white-space

屬性值說明normal默認(rèn)?？瞻讜?huì)被瀏覽器忽略。pre空白會(huì)被瀏覽器保留。其行為方式類似 HTML 中的

 標(biāo)簽。nowrap文本不會(huì)換行，文本會(huì)在在同一行上繼續(xù)，直到遇到 
 標(biāo)簽為止。pre-wrap保留空白符序列，但是正常地進(jìn)行換行。pre-line合并空白符序列，但是保留換行符。inherit規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值。
tips
word-warp和word-break定義長單詞或URL地址是否換行到下一行需要指定盒子的width（寬度），否則換行或不換行不生效
三、單行文本超出隱藏并顯示省略號(hào)
.div{
overflow: hidden;
text-overflow: ellipsis;//省略號(hào)
white-space: nowrap;
}
四、多行文本超出隱藏并顯示省略號(hào)
div{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical; // 從上到下垂直排列子元素
-webkit-line-clamp: 2;// 顯示兩行內(nèi)容
}
柚子快報(bào)邀請(qǐng)碼778899分享：css3 前端 css文字換行
http://yzkb.51969.com/
好文閱讀
評(píng)論可見，查看隱藏內(nèi)容