`word-break：break-all`和`word-wrap：break-word`有什麼區別？

我不明白爲什麼有兩個屬性似乎做同樣的事情，但他們的相互關係似乎沒有在規範中定義。`word-break：break-all`和`word-wrap：break-word`有什麼區別？

http://dev.w3.org/csswg/css-text-3/#word-break-property

http://dev.w3.org/csswg/css-text-3/#overflow-wrap-property

例如，如果我想要的文字包裝爲每How do I wrap text in a pre tag?，有些行包含不帶空格的字符串（這似乎讓Chrome認爲他們是不易碎（即使他們確實有逗號等）），除了white-space: pre-wrap之外，我還想用word-break: break-all還是word-wrap: break-word？

來源

2015-02-24 cnst

你的問題/答案就在這裏：http://stackoverflow.com/questions/1795109/what-is-the-difference-between-word- break-break-all-only-word-wrap-break – EternalHour 2015-02-24 05:49:51

'white-space：pre-wrap;'似乎在我的結尾處沒有空格。 [的jsfiddle]（http://jsfiddle.net/q9gtoz2r/）。 – 2015-02-24 05:50:00

字突破：突破 - 所有its break the sentence and text in other line 自動換行：打破-word`其不破句的斷裂線和完整的句子去下一行不間斷

p { 
 
\t width:100px; 
 
\t word-break:break-all; 
 
\t padding-left:20px; 
 
} 
 
div { 
 
\t width:100px; 
 
\t word-wrap: break-word; 
 
\t padding-left:20px; 
 
}

<body> 
 
<p>India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain's Carolina Marin in the final.</p> 
 
<div>India's Saina Nehwal won the Australian Badminton Open Super Series title at the State Sports Centre in Sydney on 29 June, 2014. Saina began the match in aggressive fashion as she raced into a 12-8 lead in the first game against Spain's Carolina Marin in the final. </div> 
 
</body>

來源

2015-02-24 06:17:14 RAJ

所以，好吧，我會接受這個答案，因爲沒有新的東西可以發佈，但是，我認爲在你的例子中，「word-wrap：break-word」實際上是一個noop，因爲你沒有類似的東西'白色空間：預先包裝'，我想。整個事情似乎沒有很清楚地指出。 :-( – cnst 2015-02-24 19:50:25

你能理解這顯然here

<p> 
    Oooohhh.AslongaswegoteachotherWegottheworldspinninright inourhands. 
</p> 
<br /> 
<p class="break-all"> 
    Oooohhh. As longaswegoteachother. Wegottheworldspinninright inourhands. 
</p> 
<br /> 
<p class="break-word"> 
    Oooohhh. As longaswegoteachother. Wegottheworldspinninright inourhands. 
</p>

CSS

p{ 
    width: 200px; 
    border: solid 1px grey; 
} 

.break-word{ 
    word-wrap: break-word; 
} 

.break-all{ 
    word-break: break-all; 
}

輸出

enter image description here

來源

2015-02-24 06:33:09 Rasel

嗯，爲什麼第一個例子中源文本中的空白不同於後兩個中的空白？這並沒有增加你試圖通過CSS指出的內容的清晰度。 – cnst 2015-02-24 19:52:30

`word-break：break-all`和`word-wrap：break-word`有什麼區別？

回答

相關問題