成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css文本換行總結(jié)

Caizhenhao / 2916人閱讀

摘要：到文本過長的問題，元素的寬度不足以容那文本的內(nèi)容，文本超出元素顯示，遇到這種情況，一般有兩種處理方式，一種是超出省略不顯示，很暴力，很直接，還有一種就是換行顯示，下面我將會介紹幾種種常用的換行方法。但文本內(nèi)的換行無效。

到文本過長的問題，元素的寬度不足以容那文本的內(nèi)容，文本超出元素顯示，遇到這種情況，一般有兩種處理方式，一種是超出省略不顯示，很暴力，很直接，還有一種就是換行顯示，下面我將會介紹幾種css種常用的換行方法。

word-break

相信這個屬性大家都不陌生，在介紹這個屬性之前先介紹一個縮寫CJK:中日韓統(tǒng)一表意文字，在下面的介紹中將會用到這個名詞，讓我們先來簡單介紹一下word-break的幾個屬性：

normal:使用默認斷行規(guī)則

break-all:對于非CJK文本，可在任意字符間斷行

keep-all:CJK文本不斷行，非CJK文本表現(xiàn)同normal一樣

下面我們來看幾個例子：

abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsa


測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試


test test Strawberry test test test test test test test test
div {
  width: 100px;
  word-break: normal;
}

當(dāng)word-break為normal時，即使用默認規(guī)則時可以看到CJK文本會自動行，非CJK文本不會自動換行，會超出容器，但是在查找到空格這類可以作為換行依據(jù)的內(nèi)容時，非CJK內(nèi)容也能實現(xiàn)換行

div {
  width: 100px;
  word-break: break-all;
}

從上面可以看到：break-all屬性很霸道，只要容器裝不下了，就會立即換行，不管是CJK內(nèi)容還是非CJK內(nèi)容，也可以理解為break-all將非CJK內(nèi)容作為CJK處理

div {
  width: 100px;
  word-break: keep-all;
}

從上面可以看到：keep-all屬性恰好和break-all相反，將CJK內(nèi)容當(dāng)成非CJK內(nèi)容處理

overflow-wrap

有可能有人看到這個屬性有點陌生，但是我一說word-wrap大家一定不陌生，其實它就是word-wrap換了個名字而已，屬性值一摸一樣，下面就來介紹一下它的屬性值：

normal：表示在正常的單詞結(jié)束處換行

break-word：表示如果行內(nèi)沒有多余的地方容納該單詞到結(jié)尾，則那些正常的不能被分割的單詞會被強制分割換行

讓我們來看個例子：

div {
  width: 100px;
  overflow-wrap: break-word;
}

從上面例子可以看到：當(dāng)屬性值為break-word時，當(dāng)?shù)竭_容器邊界時，如果單詞還沒有結(jié)束，也會自動換行，如果找到空格明確單詞結(jié)束時，就會判斷當(dāng)前行剩余寬度是否還能容納下一個單詞，如果不行就會執(zhí)行換行，以避免單詞溢出

white-space

這個屬性在文本超出顯示省略號的時候大家一定用過，下面就來看一下這個屬性的屬性值：

normal：連續(xù)的空白符會被合并，換行符會被當(dāng)作空白符處理。填充line盒子時，必要的話會換行。

nowrap：和normal一樣，連續(xù)的空白符會被合并。但文本內(nèi)的換行無效。

pre：連續(xù)的空白符會被保留。在遇到換行符或者
元素時才會換行。

pre-wrap：連續(xù)的空白符會被保留。在遇到換行符或者
元素，或者需要為了填充line盒子時才會換行。

pre-line：連續(xù)的空白符會被合并。在遇到換行符或者
元素，或者需要為了填充line盒子時會換行。

來看幾個具體的例子表現(xiàn)：

  test test test test
test test test test test test test
div {
  width: 100px;
  white-space: normal;
}

上面例子中，為了看出是否會合并空白符，特意在div前面加了兩個空格?？梢钥吹街禐閚ormal時，會合并連續(xù)空白符，并且會換行符作為空白符處理

div {
  width: 100px;
  white-space: nowrap;
}

nowrap屬性就和大家常見的一樣文本內(nèi)換行無效，但是會合并連續(xù)空白符

div {
  width: 100px;
  white-space: pre;
}

pre值可以看到，會保留連續(xù)空白符，且只有在遇到換行符的時候才會換行

div {
  width: 100px;
  white-space: pre-wrap;
}

pre-wrap值可以看到，會保留連續(xù)空白符，且在遇到換行符和需要換行的時候都會換行

div {
  width: 100px;
  white-space: pre-line;
}

pre-line值可以看到，會合并連續(xù)空白符，且在遇到換行符和需要換行的時候都會換行

line-break

此屬性用于指定如何斷行
屬性值：auto | loose | normal | strict | anywhere
目前還是一個處在Working Draft的階段，w3c地址
在chrome中測試發(fā)現(xiàn)這幾個屬性值并未想官方闡述的那樣對文本產(chǎn)生換行的影響，需要持續(xù)關(guān)注未來的進展

hyphens

此屬性告訴瀏覽器在換行時使用連字符連接單詞
屬性值：none | manual | auto
來看具體例子：

abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsa


test test Strawberry test test test test test test test test
div {
  width: 100px;
  hyphens: none;
}

當(dāng)屬性值為none時，只會在有空白符的地方換行

abashdgsgdjagdjasddnsad-vadfjasdgagdagsjdgasgdajsghsa


test test Strawberry test test test test test test test test
div {
  width: 100px;
  hyphens: manual;
}

從例子中可以看出，當(dāng)屬性值為manual的時候，只有在空白符和連接符的時候會換行

abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsa


test test Strawberry test test test test test test test test
div {
  width: 100px;
  hyphens: auto;
}

當(dāng)值為auto時，瀏覽器會自己去判斷可以在哪個位置斷行，然后自動在斷行的位置加上連接符
目前hyphens屬性也處在Working Draft的階段，w3c地址，需要大家后續(xù)的持續(xù)關(guān)注

總結(jié)

以上對css中的文本換行會用的一些屬性做了簡單的總結(jié)，要想處理好文本換行的問題，還需要花更多的精力去配合其他屬性的使用，需要更多的時間去探索，這也是css有趣的地方，不同的組合有不同的可能。
這篇文章如果有錯誤或不嚴謹?shù)牡胤?，歡迎批評指正，如果喜歡，歡迎點贊收藏

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114208.html

相關(guān)文章

  • CSS3 文本換行

    摘要：文本換行其實是個非常常用但并不起眼的特性。在中日韓文情況下，和有區(qū)別，見下圖中日韓文情況下，仍舊等于沒有設(shè)，瀏覽器選擇在文字或標(biāo)點符號處換行。但設(shè)成后，將不再允許斷詞哪怕是中日韓文，只能像英語系一樣根據(jù)半角空格或標(biāo)點來換行。 文本換行其實是個非常常用但并不起眼的特性。你什么都不用設(shè)，瀏覽器自動就會換行。例如英語，瀏覽器會根據(jù)容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇...

    EasonTyler 評論0 收藏0

  • CSS3 文本換行

    摘要：文本換行其實是個非常常用但并不起眼的特性。在中日韓文情況下，和有區(qū)別，見下圖中日韓文情況下，仍舊等于沒有設(shè)，瀏覽器選擇在文字或標(biāo)點符號處換行。但設(shè)成后，將不再允許斷詞哪怕是中日韓文，只能像英語系一樣根據(jù)半角空格或標(biāo)點來換行。 文本換行其實是個非常常用但并不起眼的特性。你什么都不用設(shè)，瀏覽器自動就會換行。例如英語，瀏覽器會根據(jù)容器尺寸，選擇在半角空格或連字符處換行。例如中文，瀏覽器會選擇...

    chinafgj 評論0 收藏0

  • CSS處理文本過長或超出部分（解說一）

    摘要：在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用對其進行處理。再補充一條，比如想讓內(nèi)容在第二行的時候，超出部分隱藏這個處理方式的目前只兼容內(nèi)核的瀏覽器其他方法見解說二 在網(wǎng)頁開發(fā)中，經(jīng)常會遇到文本超出了限定的范圍，尤其是屏幕尺寸的大小導(dǎo)致的，著實影響美觀，這個時候，就需要用css對其進行處理。 下面的方法是我在實際工作中總結(jié)...

    Bamboy 評論0 收藏0

  • HTML與CSS中的文本個人分享

    摘要：文本標(biāo)題元素注意在一個頁面中最好只使用一個標(biāo)題因為瀏覽器只會抓取一個多了沒用示例代碼標(biāo)題元素元素默認效果是顯示最大顯示最小默認效果是由瀏覽器自帶樣式提供可以通過進行修改每個標(biāo)題元素是獨占一行并且是垂直排列在實際開發(fā)中常用的標(biāo)題元素最 文本 標(biāo)題元素 注意: 在一個HTML頁面中最好只使用一個標(biāo)題 因為瀏覽器只會抓取一個多了沒用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...

    MartinHan 評論0 收藏0

  • HTML與CSS中的文本個人分享

    摘要：文本標(biāo)題元素注意在一個頁面中最好只使用一個標(biāo)題因為瀏覽器只會抓取一個多了沒用示例代碼標(biāo)題元素元素默認效果是顯示最大顯示最小默認效果是由瀏覽器自帶樣式提供可以通過進行修改每個標(biāo)題元素是獨占一行并且是垂直排列在實際開發(fā)中常用的標(biāo)題元素最 文本 標(biāo)題元素 注意: 在一個HTML頁面中最好只使用一個標(biāo)題 因為瀏覽器只會抓取一個多了沒用 示例代碼: 一花一世界 一葉一孤城 娃哈哈 爽歪歪...

    iliyaku 評論0 收藏0

發(fā)表評論

0條評論

Caizhenhao

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<