Alternative for `word-break: break-word`

Question

Is there an alternative for word-break: break-word that works in firefox ?

In firefox[Version 57.0]

In Chrome[Version 62.0.3202.94]

Is there a way or an alternative to use break-word attribute in firefox also.? [if it works in older versions it would be much better.]

Sample Code

table {
  width: 300px;
  display: inline-block;
  overflow: hidden;
  word-break: break-word;
}

.text-right {
  width: 30%;
}

<table>
  <tr>
    <td class="text-right">Sample text </td>
    <td>Sample texttexttexttexttexttexttexttext 000000000000000000000000000000</td>
  </tr>
</table>

Solution 1

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?

Solution 2

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>

Solution 3

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.

Comments

[Jithin Raj P R]

@stalinrajindian I don't want to use word-break: break-all; it will break all the words without repecting their structure.

[Jithin Raj P R]

But word-wrap: break-word will only break the line if there are words if its a line without a word then it will overflow the div. But word-break: break-word in chrome it will break the line if its overflow the div and it will also respect the word also.[ am looking for a solution like this]

[Jithin Raj P R]

This I know bro. my question is there any solution for creating the break-word in firefox

[mickaelw]

@weBer the value break-word doesn't exist for the property word-break, so I think it's normal that firefox returns an error. What do you expect?

[Yvonne Aburrow]

thanks for the clarification. Could you add a code snippet in your OP?

[Yvonne Aburrow]

"Chrome, Safari and other WebKit/Blink browsers also support the unofficial break-word value which is treated like word-wrap: break-word." developer.mozilla.org/en-US/docs/Web/CSS/word-break

[Jithin Raj P R]

@mickaelw I was just asking if there is an alternative to the same behaviour.

[mickaelw]

@weBer I just read your comment on yvonne answer. Can you add a sample into your question?

[Jithin Raj P R]

@mickaelw I have put a sample code for you guyz[it's a quick one], I hope you get the point.

[Jithin Raj P R]

I have put a sample code for you guyz[it's a quick one], I hope you get the point.

[Yvonne Aburrow]

I just found this on CodePen - any help? codepen.io/katydecorah/pen/ywmBE

[Yvonne Aburrow]

also this on GitHub which fixes a lot of issues: github.com/ftlabs/ftcolumnflow

[Yvonne Aburrow]

and this 2014 blogpost: miketaylr.com/posts/2014/01/word-break-break-word.html

[Jithin Raj P R]

Thankyou for your references and you time you spend for that. But I am wondering if there any new post or hack regarding this issue. without the help of script. For your effort, I will give you +1, but am not looking for an answer like this sorry.

[Yvonne Aburrow]

thanks for the upvote :) I think you will need to use some sort of polyfill script, I'm afraid. I found overflow-wrap: break-word but that didn't work in Firefox either :(

[G-Ram]

It must have been updated. It seems to have been updated to just have a comment in the syntax indicating that break-word is deprecated.

[andersnylund]

This works fine everywhere but not on Safari in early 2021 caniuse.com/?search=overflow-wrap%3A%20anywhere%3B. Is there any easy way to "polyfill" or patch Safari, but not Chrome, Firefox or Edge?