white-space肖爵、word-break、word-wrap臀脏、overflow-wrap的區(qū)別與聯(lián)系

1. white-space

white-space用于指定瀏覽器如何處理元素文本中的空格劝堪、制表符換行符,以及指定當(dāng)元素內(nèi)文本到達容器末尾即將溢出容器時揉稚,是否發(fā)生自動換行秒啦。
white-space的可取值有:

  • normal(默認值):文本中連續(xù)的空格、制表符將被統(tǒng)一替換成一個空格(Collapse)搀玖,換行符不發(fā)生換行余境,轉(zhuǎn)而替換成一個空格(Collapse),當(dāng)文本到達容器末尾時巷怜,自動換行(Wrap)葛超。
  • nowrap:文本中連續(xù)的空格、制表符將被統(tǒng)一替換成一個空格(Collapse)延塑,換行符不發(fā)生換行,轉(zhuǎn)而替換成一個空格(Collapse)答渔,當(dāng)文本到達容器末尾時关带,不換行(No wrap)。
  • pre:文本中的連續(xù)空格、制表符被保留(Preserve)宋雏,換行符發(fā)生換行(Preserve)芜飘,當(dāng)文本到達容器末尾時,不換行(No wrap)磨总。
  • pre-wrap:文本中的連續(xù)空格嗦明、制表符被保留(Preserve),換行符發(fā)生換行(Preserve)蚪燕,當(dāng)文本到達容器末尾時娶牌,自動換行(Wrap)。
  • pre-line:文本中連續(xù)的空格馆纳、制表符將被統(tǒng)一替換成一個空格(Collapse)诗良,換行符發(fā)生換行(Preserve),當(dāng)文本到達容器末尾時鲁驶,自動換行(Wrap)鉴裹。

將以上屬性值的特點繪制成圖表如下:

white-space屬性值

關(guān)于以上屬性的具體表現(xiàn),可參考:mdn white-space.

2. word-break

word-break屬性用于指定當(dāng)文本到達容器末尾需要自動換行時钥弯,文本的分割方式(即確定換行結(jié)點)径荔。
word-break的可取值有:

  • normal(默認值):若在當(dāng)前單詞的基礎(chǔ)上添加下一個單詞后會溢出容器,則在當(dāng)前單詞的末尾處進行換行(下一個單詞放置在第二行脆霎,此時每個單詞視作一個整體猖凛,不可分割)。
  • break-all:將文本分割成最小單位绪穆,即對于英文單詞辨泳,分割成單個字母,對于CJK(Chinese/Japanese/Korean)玖院,分割成單字菠红,連續(xù)排列,在容器末尾處換行难菌。
  • keep-all:對于英文文本试溯,表現(xiàn)為normal,對于CJK文本郊酒,連續(xù)的多個字作為一個整體(不可分割)遇绞,只有在空格處才會發(fā)生換行。
  • break-word:在normal的基礎(chǔ)上燎窘,若一行中只有一個單詞摹闽,且該單詞的長度超出了容器寬度,則該單詞會在容器末尾處發(fā)生分割來進行換行褐健。

關(guān)于以上屬性的具體表現(xiàn)付鹿,可參考:mdn word-break.

3. word-wrap

word-wrap的可取值為:

  • normal(默認值)
  • break-word

word-wrap: break-wordword-break: break-word作用相同,不過對于Edg、Firefox舵匾、IE瀏覽器俊抵,不支持word-break: break-word,此時只能用word-wrap: break-word坐梯。

4. overflow-wrap

overflow-wrap的可取值為:

  • normal(默認值)
  • break-word

overflow-wrapword-wrap的作用相同徽诲,其實overflow-wrap就是word-wrap經(jīng)過重命名而來,不過對于一些瀏覽器還暫不支持該屬性吵血,此時只能用word-wrap谎替。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市践瓷,隨后出現(xiàn)的幾起案子院喜,更是在濱河造成了極大的恐慌,老刑警劉巖晕翠,帶你破解...
    沈念sama閱讀 218,284評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件喷舀,死亡現(xiàn)場離奇詭異,居然都是意外死亡淋肾,警方通過查閱死者的電腦和手機硫麻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,115評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來樊卓,“玉大人拿愧,你說我怎么就攤上這事÷刀” “怎么了浇辜?”我有些...
    開封第一講書人閱讀 164,614評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長唾戚。 經(jīng)常有香客問我柳洋,道長,這世上最難降的妖魔是什么叹坦? 我笑而不...
    開封第一講書人閱讀 58,671評論 1 293
  • 正文 為了忘掉前任熊镣,我火速辦了婚禮,結(jié)果婚禮上募书,老公的妹妹穿的比我還像新娘绪囱。我一直安慰自己,他們只是感情好莹捡,可當(dāng)我...
    茶點故事閱讀 67,699評論 6 392
  • 文/花漫 我一把揭開白布鬼吵。 她就那樣靜靜地躺著,像睡著了一般道盏。 火紅的嫁衣襯著肌膚如雪而柑。 梳的紋絲不亂的頭發(fā)上文捶,一...
    開封第一講書人閱讀 51,562評論 1 305
  • 那天荷逞,我揣著相機與錄音媒咳,去河邊找鬼。 笑死种远,一個胖子當(dāng)著我的面吹牛涩澡,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播坠敷,決...
    沈念sama閱讀 40,309評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼妙同,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了膝迎?” 一聲冷哼從身側(cè)響起粥帚,我...
    開封第一講書人閱讀 39,223評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎限次,沒想到半個月后芒涡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,668評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡卖漫,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,859評論 3 336
  • 正文 我和宋清朗相戀三年费尽,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片羊始。...
    茶點故事閱讀 39,981評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡旱幼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出突委,到底是詐尸還是另有隱情柏卤,我是刑警寧澤,帶...
    沈念sama閱讀 35,705評論 5 347
  • 正文 年R本政府宣布匀油,位于F島的核電站缘缚,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏钧唐。R本人自食惡果不足惜忙灼,卻給世界環(huán)境...
    茶點故事閱讀 41,310評論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望钝侠。 院中可真熱鬧该园,春花似錦、人聲如沸帅韧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,904評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽忽舟。三九已至槐壳,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間承匣,已是汗流浹背掖棉。 一陣腳步聲響...
    開封第一講書人閱讀 33,023評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留柿菩,地道東北人。 一個月前我還...
    沈念sama閱讀 48,146評論 3 370
  • 正文 我出身青樓,卻偏偏與公主長得像状您,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子兜挨,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,933評論 2 355

推薦閱讀更多精彩內(nèi)容