white-space、word-wrap和word-break的簡單整理

Magicer 發布于2019-08-30 15:52 / 914人閱讀

摘要：理解和的區別從易于區分和理解的角度，我引用了無雙在你真的了解和的區別嗎一文中對兩個屬性作用的解釋屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。

white-space 、 word-wrap 和 word-break 是決定段落中的文本如何展示的3個css屬性，屬性說明請點擊鏈接查看參考手冊。

white-space

white-space屬性定義了如何處理文本中的空白；具體到細節，主要決定決定了如何處理元素內文本中空白符、換行符、是否允許過長行折行;
其中，過長行是指那些單行內容寬度超出了容器寬度的行，以下列代碼為例：

 ABCDEFGHIJKOMN

/*css*/ p{width:4em;}

內容行ABCDEFGHIJKOMN渲染寬度為7em，超過所在容器的指定寬度，那么它屬于過長行。

white-space屬性各可能值的對比

white-space默認值為normal，可選值包括pre、nowrap、pre-wrap、pre-line。

可選值各維度對比

下表對比分析了white-space各值在處理空白符、換行符、折行與否時的不同策略。

值	概述	空白符	換行符	過長行是否折行
normal	合并連續的空白符、換行符為一個空白符；折行；	連續的多個空白符合并成一個；	換行符被當做空白符處理，一同合并；	折行（說明1）
pre	完全保留代碼中格式；不折行；	所有空白符保留；	所有換行符保留；	不折行（說明2）
nowrap	合并連續的空白符、換行符為一個空白符；不折行；	連續的多個空白符合并成一個；	換行符被當做空白符處理，一同合并；	不折行（說明2）
pre-wrap	保留所有空白符、換行符；折行；	所有空白符保留；	所有換行符保留；	折行（說明1）
pre-line	空白符合并；換行符保留；折行；	連續的多個空白符合并成一個；	所有換行符保留；	折行（說明1）

說明1：折行（ CJK遇到容器邊界自動換行；非CJK由word-wrap和word-break的值決定。）
說明2：不折行（行內容寬度超出容器寬度時的表現由overflow屬性決定；word-wrap和word-break設置為任何值都不影響表現。）

其他說明

1.如下方代碼(圖1)及相應效果圖(圖2)所示，段落中的換行效果可能來源于兩種不同的原因。一種是段落中保留的換行符；另一種情況是過長行的折行效果。
前者在所屬容器寬度改變時，仍然是多帶帶一行；后者在所屬容器改變時可能合并到其余行中。

word-wrap和word-break

white-space值為normal、pre-wrap、pre-line時，過長行遇到容器邊界時會觸發折行現象。white-space決定了過長行是否發生折行，而 word-wrap和word-break用于決定如何進行折行。

理解word-wrap和word-break的區別

從易于區分和理解的角度，我引用了“無雙”在你真的了解word-wrap和word-break的區別嗎？一文中對兩個css屬性作用的解釋：
word-wrap

word-wrap 屬性用來標明是否允許瀏覽器在單詞內進行斷句，這是為了防止當一個字符串太長而找不到它的自然斷句點時產生溢出現象。

word-break

word-break 屬性用來標明怎么樣進行單詞內的斷句。

關于word-wrap和word-break，我們主要關注word-wrap:break-word和word-break:break-all的區別:
word-wrap先嘗試尋找空格、連接符等正常換行點，如果正常換行能滿足不超出容器寬度的需求，正常換行；如果正常換行后仍然超出容器寬度，對非CJK長內容進行強制換行。
word-break:break:all直接強制在行末尾換行。

詳細論述和驗證建議參考張鑫旭大神的word-break:break-all和word-wrap:break-word的區別和無雙的你真的了解word-wrap和word-break的區別嗎？，兩篇文章闡述都清晰明了，此處不班門弄斧；引出基本的概念和理解主要為了引出后續的組合引用效果表格。

word-wrap和word-break的組合引用效果

word-wrap默認值normal，可選值break-word;
word-break默認值normal，可選值為break-all，keep-all。非CJK文本下，keep-all和normal的表現是一致的。
下表列出了word-wrap和word-break的組合使用效果。

組合	效果
word-wrap:normal; word-break:normal;	遵循默認規則折行；如沒有-和空白符，不折行(說明1)；
word-wrap:normal; word-break:break-all;	內容遇到容器末尾強制執行換行；
word-wrap:break-word; word-break:normal;	優先嘗試正常折行；正常折行后仍然過長的，強制在遇到容器末尾時換行；
word-wrap:break-word; word-break:break-all;	內容遇到容器末尾強制執行換行(非末行均占滿容器寬度)；（不優先嘗試-和空白符等折行規則）

說明1：超出容器寬度后的效果優overflow屬性決定。

End

GPU云服務器云服務器 asp整理目錄和文件 word-break word-wrap white-space

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

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

簡單理解 word-wrap、word-break 和 white-space 的區別

摘要：文本不會換行，文本會在在同一行上繼續，直到遇到標簽為止。保留空白符序列，但是正常地進行換行。合并空白符序列，但是保留換行符。規定應該從父元素繼承屬性的值。參考文章你真的了解和的區別嗎和區別不設置word-warp和word-break的時候，一行單詞，超過了容器的寬度是，會將最后一個單詞下移一行進行顯示，如果下移的那個單詞長度還是超過了容器寬度，則會溢出 word-wrap 設置wo...

spacewander 2019-08-30 15:54 評論0 收藏0
CSS 文本控制

摘要：學習一些文本控制的屬性，防止做傻事。是的升級版，當單行文本過長，超過文本邊界時自動換行。否則，文本仍然左對齊。 one more time one more chance. 一歩重頭學前端, css入門。學習一些 CSS 文本控制的屬性，防止做傻事。請大家對照下面列表檢驗下：會的、不會的、似懂非懂的。筆者是一個也不會。 white-space text-overflow: ell...

Taonce 2019-08-29 15:42 評論0 收藏0
圖解CSS3讀書筆記文本與顏色

摘要：將內容在邊界內換行不截斷英文單詞換行語法瀏覽器只在半角空格或連字符的地方進行換行。個人感覺跟類似強行截斷英文單詞，達到詞內換行效果。 CSS3文本 css字體類型屬性 font-family, font-style(normal、italic、oblique[傾斜]), font-weight, font-size-adjust(定義是否強制對文本使用同一尺寸,僅火狐支持), font...

lvzishen 2019-08-28 18:26 評論0 收藏0
【芝士整理】CSS基礎圖譜

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動產生，元素周圍的內容轉換為圍繞元素排列。選擇器注意點屬性選擇器 [attr^=value] - 開頭或全等 [attr$=value] - 結尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含選擇器組 A > B - 直接子節點 A + B - 下一個兄弟節點 A...

iOS122 2019-08-30 15:54 評論0 收藏0
word-wrap & word-break & white-space

摘要：瀏覽器默認換行規則空格，回車，制表符，全部合成一個空格，文本自動換行只在半角空格，連字符處換行參考鏈接多行文本溢出省略顯示實現單行多行文本超出顯示省略號瀏覽器默認換行規則：空格，回車，制表符，全部合成一個空格，文本自動換行（只在半角空格，連字符處換行） showImg(https://segmentfault.com/img/bVbrhiA?w=685&h=106); 參考鏈接：ht...

QiuyueZhong 2019-08-29 18:35 評論0 收藏0