CODEWITHSUNDEEP
cssfirefoxword-wraphtml-table
KeenUser
KeenUser

Reputation: 5525

Solution for word-break:break-all styling in firefox?

I am trying to wrap text inside a td and using the below style

word-break:break-all

Works perfectly fine in IE, but fails in Firefox, read that this isnt supported! tried the solution given in http://petesbloggerama.blogspot.com/2007/02/firefox-ie-word-wrap-word-break-tables.html. Didnt seem to work either, Any solution for this?

Thanks, Adarsh

Upvotes: 6

Views: 8687

Answers (6)

Matheus Carmo
Matheus Carmo

Reputation: 59

word-wrap will only work for inline-block or block elements. So, you have to change your element type. Like:

.example {
  display: inline-block;
  word-break: break-all;
}

Upvotes: 4

Cyril
Cyril

Reputation: 401

With

display : block;

It is ok

Upvotes: 1

Shubham Gupta
Shubham Gupta

Reputation: 11

Use word-wrap: break-word; It will surely work!!

Upvotes: 1

Fred
Fred

Reputation: 232

Try this instead: 

word-wrap:break-word

It should work in all browsers (so long as you have a fixed width on the div/cell you're applying it to...

Upvotes: 0

fyr
fyr

Reputation: 20869

I finally had some trouble with this also. But i managed to get it working:

.hardBreak {
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+, 6, 7, 8 compability-mode */
  -ms-word-break: break-all; /* Internet Explorer 8 */
}

I hope this helps.

The last option is needed while having IE8 native mode. This works for me and is tested in FF8, IE 7, 8compability, 8native, Chrome.

Upvotes: 10

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201728

I don’t think the solution you mention has worked for some time; it may have (inadvertantly?) worked on some past versions of Firefox, but it does not look like one that could be expected to do the job (pre-wrap shouldn’t be expected to break words).

The way to make Firefox treat a point as permissible direct line break opportunity is the <wbr> tag—not in any specification, but widely supported. Normally it is best used by inserting it at suitable points, but at the extreme, you could even put it between any two characters (presumably, you would use preprocessing, server-side scripting, or client-side JavaScript to do this).

Upvotes: 0

Related Questions