CODEWITHSUNDEEP
cssword-break
Jithin Raj P R
Jithin Raj P R

Reputation: 6797

Alternative for `word-break: break-word`

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

In firefox[Version 57.0]

enter image description here

In Chrome[Version 62.0.3202.94]

enter image description here

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>

Upvotes: 18

Views: 18843

Answers (5)

user2759685
user2759685

Reputation: 1

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.

Upvotes: 0

RDU
RDU

Reputation: 1071

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>

Upvotes: 12

G-Ram
G-Ram

Reputation: 33

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.

Upvotes: 2

mickaelw
mickaelw

Reputation: 1513

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

Upvotes: 0

Yvonne Aburrow
Yvonne Aburrow

Reputation: 2728

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?

Upvotes: 7

Related Questions