css文本換行總結

Caizhenhao 發布于2019-08-29 17:16 / 2883人閱讀

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

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

word-break

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

normal:使用默認斷行規則

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

keep-all:CJK文本不斷行，非CJK文本表現同normal一樣

下面我們來看幾個例子：

abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsa
測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試測試
test test Strawberry test test test test test test test test

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

當word-break為normal時，即使用默認規則時可以看到CJK文本會自動行，非CJK文本不會自動換行，會超出容器，但是在查找到空格這類可以作為換行依據的內容時，非CJK內容也能實現換行

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

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

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

從上面可以看到：keep-all屬性恰好和break-all相反，將CJK內容當成非CJK內容處理

overflow-wrap

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

normal：表示在正常的單詞結束處換行

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

讓我們來看個例子：

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

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

white-space

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

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

nowrap：和normal一樣，連續的空白符會被合并。但文本內的換行無效。

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

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

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

來看幾個具體的例子表現：

  test test test test
test test test test test test test

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

上面例子中，為了看出是否會合并空白符，特意在div前面加了兩個空格。可以看到值為normal時，會合并連續空白符，并且會換行符作為空白符處理

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

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

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

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

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

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

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

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

line-break

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

hyphens

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

abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsa
test test Strawberry test test test test test test test test

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

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

abashdgsgdjagdjasddnsad-vadfjasdgagdagsjdgasgdajsghsa
test test Strawberry test test test test test test test test

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

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

abashdgsgdjagdjasddnsadvadfjasdgagdagsjdgasgdajsghsa
test test Strawberry test test test test test test test test

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

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

總結

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

云服務器 GPU云服務器換行css css換行 AspNet文本換行 html顯示文本換行

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114208.html

CSS3 文本換行

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

EasonTyler 2019-08-30 13:16 評論0 收藏0
CSS3 文本換行

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

chinafgj 2019-08-01 16:05 評論0 收藏0
CSS處理文本過長或超出部分（解說一）

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

Bamboy 2019-08-29 12:49 評論0 收藏0
HTML與CSS中的文本個人分享

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

MartinHan 2019-08-29 16:32 評論0 收藏0
HTML與CSS中的文本個人分享

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

iliyaku 2019-08-02 11:21 評論0 收藏0