0

In this question as well as this blog, there's mentioning of the style word-break with its values. Also, there's the value break-word as something belonging to e.g. word-wrap class.

In the recent template for MVC in VS, I found the combination word-break: break-word (well, Resharper found it, really). And now I'm curious if it's a valid combo to begin with (which I failed to find when gooling) or if it's an invalid CSS syntax (in which case I wonder why MS put it there and what's the story behind it).

ProgrammingLlama
  • 36,677
  • 7
  • 67
  • 86
Konrad Viltersten
  • 36,151
  • 76
  • 250
  • 438
  • 1
    When I google it, I get https://developer.mozilla.org/en-US/docs/Web/CSS/word-break – Mr Lister Feb 09 '19 at 13:28
  • @MrLister Interesting. You got more than I did. However, if you click on the different options at that link, you'll notice that the last option (the one in question here) doesn't do any difference compared to *normal*. Is it something specific to FF? I get the error message on my CSS in CS. Hence, me asking. – Konrad Viltersten Feb 09 '19 at 22:15
  • See https://stackoverflow.com/a/35251345/2813224 – zer00ne Feb 10 '19 at 10:34

2 Answers2

3

There are other questions about this subject, for instance this one with many excellent answers, but that amount of info may distract from the basic question, what do the different values to word-break do. So here's an answer to that question and that question only.

If you take this snippet

body {
  max-width: 15em;
  box-shadow: green 0 0 8px;
  word-break: normal;
}
Some short words, somewhatlongerwords and extremelylongwordsthatarereallylong for testing purposes.

With the default value of normal, words are not broken; ordinary word wrap is used and the longest word overflows out of the box. Screenshot:

enter image description here

break-all breaks all words at the end of the line, no matter if they would fit in their entirety on the next line or not.

enter image description here

keep-all is meant for CJK (Chinese, Japanese and Korean) words, which ordinarily don't have spaces between them.
With pure English text, there's no difference to normal.

enter image description here

(If you're interested, this MDN article features an example with Japanese text, where you can see the difference.)

And break-word breaks up those words that don't fit in the box. This is not the same as break-all, which breaks all words regardless.

enter image description here

Now this last one is non-standard, and it doesn't work in all browsers, so if you want this, you should also write overflow-wrap: break-word; in your stylesheet, and for compatibility with older browsers word-wrap: break-word; as well.

There is more to it, but I'll refer you to this question for the reasoning, the history, etc.

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
  • A bit annoying and surprising that the default template from MS that works on MS browser will flag that syntax as error when using the default IDE from MS. I'm not happy about that. +1 for an awesome answer, though. I'm very happy about it. – Konrad Viltersten Feb 10 '19 at 21:11
-1

Word break - breaks the word to the next line if it exceeds the width. You can check the css works in the browser or not in the below site.

caniuse.com

Sivaramakrishnan
  • 689
  • 1
  • 4
  • 11