為什么很難搞懂文本控制屬性word-break和word-wrap的異同

  • 時間:2018-08-02 22:10 作者:小鄭搞碼事 來源:小鄭搞碼事 閱讀:205
  • 掃一掃,手機訪問
摘要:點擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!為什么很難搞懂?看完了這篇文章后,你就知道起因了,同時也會徹底搞明白CSS使用于控制文本的兩個屬性word-break和word-wrap的異同。一、這樣了解就記住了【1、取值這樣記】word-break:normal(break

點擊右上方紅色按鈕關注“小鄭搞碼事”,每天都能學到知識,搞懂一個問題!

為什么很難搞懂?看完了這篇文章后,你就知道起因了,同時也會徹底搞明白CSS使用于控制文本的兩個屬性word-breakword-wrap的異同。

一、這樣了解就記住了

【1、取值這樣記】

word-break:normal(break-all)

word-wrap:normal(break-word)

可以看出,這兩個屬性分別有兩個取值(其實還有些其它取值,出于目前兼容性問題,不列出來,免得干擾,可以理解),其中normal是都有的取值,其作使用是默認效果,相當于就是不設置這個屬性。不設置,可以不記normal,但是肯定要知道不設置時,文本是怎樣展現的,也就是說不設置時的效果是怎樣樣的,等會實例部分我會說。先記住不設置(默認)的狀態是:

文本中連續英文字符不換行(不設置或者者設置normal)

那么除去上面normal,其實每個屬性都只需記住一個屬性就行了。當設置這一個屬性,對文本有什么樣的控制作使用了。實例部分我來講,目前,肯定要記住(所有瀏覽器都支持):

word-break:break-all

word-wrap:break-word

【2、區別這樣記】

看上面代碼,這兩個屬性長的非常類似,屬性名都有個word,取值都有個break。同時它們的位置也都一樣。在深一點觀察,上一行代碼有兩個break,下一行代碼有兩個word。好了,這些都是表象。最主要類似點是它們的功能作使用非常類似。

功能都是:讓連續英文字符換行。

二、使用實例進一步驗證

【1、取值normal實例】

也就是不設置或者者將兩個屬性設置為normal時的狀態是:文本中連續英文字符不換行

來看一下實際例子中的體現:

為什么很難搞懂文本控制屬性word-break和word-wrap的異同

死死抓住概念定義,上面url沒有折行,在一行顯示,當過長的話,會超出容器展現,總之,不換行顯示,同時,下面的good單詞也是連續顯示,并沒有將這個單詞拆分開來顯示。所以默認文本中連續英文字符不換行就是這個意思。

【2、取值break-區別實例】

第一,設置word-break:break-all時的狀態:所有都換行,一點空隙都不放過

為什么很難搞懂文本控制屬性word-break和word-wrap的異同

同樣看兩個地方,上面的url和下面的單詞good。很顯著都折行顯示了。

第二,設置word-wrap:break-word時的狀態:假如一行文字中有可以換行的地方(如空格,中文等),就不讓英文單詞/字符換行

為什么很難搞懂文本控制屬性word-break和word-wrap的異同

由上圖可以看出,完整單詞不會換行,每個單詞間都有換行的空格符。而url長度因為超出容器寬度,在容器內沒有可換行的地方,導致字符換行。這一點和不設置(或者設置normal)的區別所在。同時,要注意中文和字符之間有一段可惡的留白部分。

現在可以明白了,不設置時,文本可以超出容器顯示,而word-wrap:break-word控制在容器內顯示。

總結一下:

為什么這兩個屬性很容易搞混。就像我說的,它們長的太類似,所以在CSS3中將word-wrap改成overflow-wrap。這樣更有語義,助于了解,但出于兼容性問題,提示慎使用。

  • 全部評論(0)
最新發布的資訊信息
【系統環境|】學習web前端開發是正確的選擇(2019-09-15 16:55)
【系統環境|】干貨整理!零基礎html5網站開發學習步驟方法(保存不后悔)(2019-09-10 16:27)
【系統環境|】「前端入門」前端基本概念(2019-09-07 21:36)
【系統環境|】小白入門學習web前端,這些干貨不能少(2019-09-05 20:59)
【系統環境|】不是計算機專業,哪個專業更適合學習web前端(2019-09-03 20:31)
【系統環境|】入行web前端開發可以做什么工作(2019-09-02 20:51)
【系統環境|】什么是Web前端呢?為什么說web前端開發人員的薪資高、前景好呢?(2019-08-31 20:55)
【系統環境|】2019年Web前端開發的8個趨勢,你知道幾個?(2019-08-29 16:23)
【系統環境|】學習web前端,掌握這些,才有底氣跟面試官提薪資(2019-08-28 15:23)
【系統環境|】Web前端為什么那么好(2019-08-27 18:20)
手機二維碼手機訪問領取大禮包
返回頂部
双色球号码300期遗传走势图