Alternative for `word-break: break-word`

The valid values of word-break are as follows:

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

The word-break CSS property specifies whether or not the browser should insert line breaks wherever the text would otherwise overflow its content box.

Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word.

So could you use word-wrap: break-word instead?

I'm a bit late to the party, but I think I found the answer.

I've always used word-break: break-word because it's perfect in most cases, if there is enough space it wraps and keeps the words, and if there's not enough space it breaks the word. MDN Web Docs say that word-break: break-word is deprecated but will probably still works, but the real reason I started looking at an alternative is that visual studio doesn't auto-complete break-word anymore :)

Solution ?

MDN - overflow-wrap

overflow-wrap: anywhere;

Wraps the words to new line, and only breaks the word if it need to.

"The property was originally a nonstandard and unprefixed Microsoft extension called word-wrap, and was implemented by most browsers with the same name. It has since been renamed to overflow-wrap, with word-wrap being an alias."

So overflow-wrap should be used instead of word-wrap.

var s = document.querySelector('div');

function a(){
  s.removeAttribute('class');
  s.classList.add('a');

}

function b(){
  s.removeAttribute('class');
  s.classList.add('b');

}

#class{
  border: 1px solid rgb(255, 120, 120);
  width: 100px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 2px;
}

btn{
  border: 1px solid gray;
  padding: 2px;
  border-radius: 5px;
  box-shadow: 0 0 2px gray;
  cursor: pointer;
}

.a{
  overflow-wrap: normal;
}

.b{
  overflow-wrap: anywhere;
}

<span>overflow-wrap:</span>
<btn onClick="a()">Normal</btn>
<btn onClick="b()">Anywhere</btn>

<div id='class'>
  We need a very long word like Supercalifragilisticexpialidocious 
</div>

<i>There's also overflow-wrap: break-word;</i>

According to this thread on Bugzilla, word-break: break-word now works in Firefox as of version 67. It got implemented in this changeset.

break-word does come with this note in the MDN docs:

This deprecated API should no longer be used, but will probably still work.

To manipulate words in your case you have two CSS properties: word-break and word-wrap:

• word-break: https://www.w3schools.com/cssref/css3_pr_word-break.asp
• word-wrap: https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

For compatibility with legacy content, the word-break property also supports a deprecated break-word keyword. When specified, this has the same effect as word-break: normal and overflow-wrap: anywhere, regardless of the actual value of the overflow-wrap property. source here It worked perfectly on my websites.