`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`有什么区别？

回答

相关问题