word-break/word-wrap/word-spacing/white-space 用法及區(qū)別

1.word-break: normal? / break-all / keep-all;

①break-all:允許打斷單詞換行,主要針對(duì)長(zhǎng)的英文單詞及阿拉伯長(zhǎng)數(shù)據(jù),在某一行空間不足自動(dòng)換為下一行問(wèn)題。

②keep-all:不允許CJK(Chinese/Japanese/Korean)文本中的單詞換行,只能在半角空格或連字符處換行;非CJK文本的行為實(shí)際上和normal一致。這是為亞洲設(shè)置的屬性,所以支持性不是很好。

2.word-wrap:normal? / break-word;

①break-word:防止當(dāng)一個(gè)字符串太長(zhǎng)而找不到它的自然斷句點(diǎn)時(shí),產(chǎn)生溢出現(xiàn)象。

出現(xiàn)溢出

3. word-spacing: **px/em;

文字間距,不支持百分比,這個(gè)屬性就不寫(xiě)demo了。

4.white-space:normal | pre | nowrap | pre-wrap | pre-line


pre:用等寬字體顯示預(yù)先格式化的文本,不合并文字間的空白距離,當(dāng)文字超出邊界時(shí)不換行。可查閱pre對(duì)象

nowrap:強(qiáng)制在同一行內(nèi)顯示所有文本,合并文本間的多余空白,直到文本結(jié)束或者遭遇br對(duì)象。

pre-wrap:用等寬字體顯示預(yù)先格式化的文本,不合并文字間的空白距離,當(dāng)文字碰到邊界時(shí)發(fā)生換行。

pre-line:保持文本的換行,不保留文字間的空白距離,當(dāng)文字碰到邊界時(shí)發(fā)生換行。

使用最多的就是nowrap了,看看它的效果:


最后,做一個(gè)項(xiàng)目經(jīng)常遇到的樣式:讓一個(gè)文本單行顯示過(guò)長(zhǎng),出現(xiàn)省略號(hào)。

css樣式設(shè)置如下;

.p2{

height:20px;

margin:5%auto;

border:1px solid gold;

width:16%;

overflow:hidden;

white-space:nowrap;

text-overflow:ellipsis;

}

2017/10/11補(bǔ)充:

letter-spacing?字符間距,每一個(gè)字符之間的間距。



如果該文對(duì)你有用,不要吝嗇你的愛(ài)心“?”哦!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 之前通過(guò)幾何分形學(xué)學(xué)習(xí)了一下緩存機(jī)制,今天來(lái)學(xué)習(xí)一下“字詞分割學(xué)”吧,哈哈,我自己瞎造的詞,主要是為了學(xué)習(xí)一下CS...
    心徹閱讀 1,602評(píng)論 0 1
  • CSS3中的word-wrap、word-break、white-space想必大家都接觸過(guò),今天我們來(lái)一起溫故而...
    ??﹪颠薉Q閱讀 628評(píng)論 0 0
  • 文本換行其實(shí)是個(gè)非常常用但并不起眼的特性。你什么都不用設(shè),瀏覽器自動(dòng)就會(huì)換行。例如英語(yǔ),瀏覽器會(huì)根據(jù)容器尺寸,選擇...
    張歆琳閱讀 8,628評(píng)論 1 7
  • 第一章:莫名的相遇 機(jī)場(chǎng),一個(gè)時(shí)尚的少女走了出來(lái),顯得與附近的人格格不入,小小的身材擠在人群里,但是從臉上的表情可...
    某只吃貨王互閱讀 702評(píng)論 1 3
  • 餐桌上沒(méi)人說(shuō)話。 我感覺(jué)飽了。 筷子隨意扒拉著碗里的飯菜,“我吃飽啦?!?“碗里還有,怎么不吃完?”對(duì)面的三舅開(kāi)口...
    INKMAX閱讀 394評(píng)論 0 1

友情鏈接更多精彩內(nèi)容