Menu
I don't understand why there are two properties that seem to do the same thing, yet their interrelation does not appear to be defined within the spec.
http://dev.w3.org/csswg/css-text-3/#word-break-property
http://dev.w3.org/csswg/css-text-3/#overflow-wrap-property
For example, if I want text wrapped as per How do I wrap text in a pre tag?, and some lines contain strings with no spaces (which seems to make Chrome think they're non-breakable (even if they do have commas and such)), do I want to use word-break: break-all or word-wrap: break-word, in addition to white-space: pre-wrap?
573
word-break: break-allits break the sentence and text in other line
word-wrap: break-word` its not break the sentence its break the line and full sentence go to next line without break
p {
width:100px;
word-break:break-all;
padding-left:20px;
}
div {
width:100px;
word-wrap: break-word;
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>You can understand this clearly 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;
}
output
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
