CODEWITHSUNDEEP
htmlcssfirefox
natalie
natalie

Reputation: 81

Why doesn't word-break:break-word work in Firefox?

I have a div and a table inside with paging:

.wrapper tbody td {     
    word-break:break-word;
}
<div class="wrapper">
    <table>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</table>
</div>

This CSS works fine for Chrome, but not for Firefox. So, when paging, my text is out of my div in Firefox.

I also applied for Firefox the following CSS after reading How can I make Firefox word-break with CSS?

.wrapper tbody td {
    word-break:break-all;
    word-wrap: break-word;
}

but now word-wrap:break-word is not working. Instead, word-break:break-all is working. How can I force word-break: break-word; to work in Firefox and break the words of my text like separate words?

Upvotes: 1

Views: 230

Answers (2)

Wayne Smith
Wayne Smith

Reputation: 4868

Valid syntax for word-break is:

 word-break: normal | break-all | keep-all;

The word-break: break-word; property is a non-standard WebKit implementation only. Since Firefox doesn't use the WebKit rendering engine, that property value won't work in Firefox.

Upvotes: 1

coder hacker
coder hacker

Reputation: 4868

Use only word-wrap: break-word; instead of word-break:break-all;

.wrapper tbody td {

 word-wrap: break-word;

  }

Upvotes: 0

Related Questions