word-break庸论,word-wrap和white-space

我們先看看不加任何屬性是如何換行處理的
下面各類屬性都是加在一個p元素上的鱼喉。

p {
    width: 300px;
    padding: 5px;
    background-color: #f0f3f9;
    font-size: 14px;
}

我們看到不加任何屬性時候锋边,邊界遇到中文自動換行。英文需要有空格才會換行编曼。如果一個單詞長到一行都無法顯示完全的話豆巨,這個單詞則不會進行換行,而是溢出顯示掐场。

word-break

word-break: normal; //使用默認的換行規(guī)則往扔。
word-break: break-all; //允許任意非CJK(Chinese/Japanese/Korean)文本間的單詞斷行。
word-break: keep-all;//不允許CJK(Chinese/Japanese/Korean)文本中的單詞換行熊户,只能在半角空格或連字
符處換行萍膛。非CJK文本的行為實際上和normal一致。
word-break:break-all

我們看到word-break:break-all就是非常暴力的遇見什么折斷什么的方式進行換行嚷堡。

word-break: keep-all

我們可以看到中文在沒有遇到半角空格或連字符時蝗罗,是不進行換行的。而非CJK文本的行為表現(xiàn)和normal一致。

word-wrap

word-wrap: normal;
word-wrap: break-word;//一行單詞中實在沒有其他靠譜的換行點的時候換行串塑。

僅用于塊對象沼琉,內聯(lián)對象要用的話,必須要設定height拟赊、width或display:block或position:absolute刺桃。

word-wrap: break-word

word-wrap:break-word則帶有憐憫之心,如果這一行文字有可以換行的點吸祟,如空格瑟慈,或CJK(Chinese/Japanese/Korean)(中文/日文/韓文)之類的,則就不打英文單詞或字符的主意了屋匕,讓這些換行點換行葛碧。如果沒有其他可以換行的符號空格等再折斷單詞進行換行。
記憶方法word-wrap: break-word 和 word-break:break-all
有兩個break的就是很強硬的斬斷一切的过吻。只有一個break的相對比較溫和进泼。先看空格之類的換行符。

white-space

white-space是字符是否換行顯示的

常用的單行文本超出顯示...

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

多行顯示...

word-break:break-all和word-wrap:break-word的區(qū)別

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末纤虽,一起剝皮案震驚了整個濱河市乳绕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌逼纸,老刑警劉巖洋措,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異杰刽,居然都是意外死亡菠发,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門贺嫂,熙熙樓的掌柜王于貴愁眉苦臉地迎上來滓鸠,“玉大人,你說我怎么就攤上這事第喳∶铀祝” “怎么了?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵曲饱,是天一觀的道長吩跋。 經常有香客問我,道長渔工,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任桥温,我火速辦了婚禮引矩,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己旺韭,他們只是感情好氛谜,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著区端,像睡著了一般值漫。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上织盼,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天杨何,我揣著相機與錄音,去河邊找鬼沥邻。 笑死危虱,一個胖子當著我的面吹牛,可吹牛的內容都是我干的唐全。 我是一名探鬼主播埃跷,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼邮利!你這毒婦竟也來了?” 一聲冷哼從身側響起延届,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎祷愉,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體二鳄,經...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡赴涵,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了订讼。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡寄纵,死狀恐怖,靈堂內的尸體忽然破棺而出脖苏,到底是詐尸還是另有隱情程拭,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布棍潘,位于F島的核電站恃鞋,受9級特大地震影響崖媚,放射性物質發(fā)生泄漏恤浪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一水由、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧砂客,春花似錦、人聲如沸鞭盟。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至粤剧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間抵恋,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工盅安, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人别瞭。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓株憾,卻偏偏與公主長得像蝙寨,于是被迫代替她去往敵國和親嗤瞎。 傳聞我的和親對象是個殘疾皇子墙歪,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內容

  • 之前通過幾何分形學學習了一下緩存機制虹菲,今天來學習一下“字詞分割學”吧,哈哈届惋,我自己瞎造的詞髓帽,主要是為了學習一下CS...
    心徹閱讀 1,436評論 0 1
  • CSS3新特性中關于文本方面的內容不少脑豹,會有兩節(jié)內容:文字渲染和文本格式衡查。今天來談談最復雜的部分——文本格式。今天...
    荷小音閱讀 978評論 0 2
  • 1.word-break: normal / break-all / keep-all; ①break-all:允...
    提小莫閱讀 1,145評論 0 7
  • 我知道回來這一天俱饿,兩天,三天一定會有一種渾渾噩噩的抽空期塌忽。 我知道那些說過再見和常聯(lián)系的人又會在瑣屑的生活里漸漸隱...
    樂喜閱讀 157評論 0 1
  • 2015年的夏天 我從半年前就開始倒數這個夏天我在等 你和我說好的 再見面的約定我在等 我等了那么久的一句回答 以...
    DREAMER追夢人閱讀 205評論 0 1