CODEWITHSUNDEEP
css
FunLovinCoder
FunLovinCoder

Reputation: 7867

How do I wrap text with no whitespace inside a <td>?

I've used:

word-break:break-all;
table-layout:fixed;

and the text wraps in Chrome but not Firefox.

Update: I decided to change the design so it didn't need the wrap; trying to sort out a CSS fix/hack was proving too frustrating and time consuming.

Upvotes: 107

Views: 118995

Answers (11)

Victor Eke
Victor Eke

Reputation: 465

This also works for all browsers:

td {
  overflow-wrap: anywhere;
  word-break: break-all;
}

Upvotes: 0

Andy
Andy

Reputation: 11462

Another non-css solution that might be simpler is to put it in a read-only textbox. As far as I'm aware textboxes will wrap to a word if they can but if not they will just wrap anyway, and on no account will the contents ever spill over the edge of the containing object

Upvotes: 0

Spinstaz
Spinstaz

Reputation: 331

What worked for me was:

.output {

overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;

}

Upvotes: 2

Stirling
Stirling

Reputation: 4378

Try this, I think this will work for something like "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" will produce

AARRRRRRRRRRRRRRRRRRRR
RRGGGGGGGGGGGGGGGGGGGG
G

I have taken my example from a couple different websites on Google. I have tested this on ff 5.0, IE 8.0, and Chrome 10.

.wrapword {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -webkit-pre-wrap;          /* Chrome & Safari */ 
    white-space: -pre-wrap;                 /* Opera 4-6 */
    white-space: -o-pre-wrap;               /* Opera 7 */
    white-space: pre-wrap;                  /* CSS3 */
    word-wrap: break-word;                  /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}

<table style="table-layout:fixed; width:400px">
    <tr>
        <td class="wrapword">
        </td>
    </tr>
</table>

Upvotes: 235

Rahul
Rahul

Reputation: 18557

Here is advanced version of what OP asked.

Sometimes, what happens is that, our client wants us to give '-' after word break to end of line.

Like 

AAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBB

break to 

AAAAAAAAAAAAAAAAAAAAAAA-
BBBBBBBBB

So, there is new CSS property if supported, usually supported in latest browsers.

.dont-break-out {

  /* These are technically the same, but use both */
  overflow-wrap: break-word;
  word-wrap: break-word;

  -ms-word-break: break-all;
  /* This is the dangerous one in WebKit, as it breaks things wherever */
  word-break: break-all;
  /* Instead use this non-standard one: */
  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  hyphens: auto;

}

I am using this one.

I hope somebody will have demand like this.

Upvotes: 19

Jeffrey Roosendaal
Jeffrey Roosendaal

Reputation: 7147

I'm using Angular for my project, and managed to solve this with a simple filter:

Template:

<td>{{string | wordBreak}}</td>

Filter:

app.filter('wordBreak', function() {
    return function(string) {
        return string.replace(/(.{1})/g, '$1​');
    }
})

You can't see it, but after $1 there is an invisible space (thanks @kingjeffrey for the tip), which enabled word breaks for table cells.

Upvotes: 0

Black Frog
Black Frog

Reputation: 11703

Set a column width for the td tag.

Upvotes: 3

XDM
XDM

Reputation: 141

For an automatic table layout try to style the concerned td combining the attributes max-width and word-wrap.

Eg: <td style="max-width:175px; word-wrap:break-word;"> ... </td>

Tested in Firefox 32, Chrome 37 and IE11.

Upvotes: 14

dunxd
dunxd

Reputation: 958

I think this is a long standing issue in Firefox, that harks back to Mozilla and Netscape. I'll bet you were having the issue with the display of long URLs. I think it is an issue with the rendering engine rather than something you can fix with CSS, without some ugly hacks.

Makes sense to change the design.

This looked hopeful though: http://hacks.mozilla.org/2009/06/word-wrap/

Upvotes: 0

kingjeffrey
kingjeffrey

Reputation: 15250

You can manually inject zero width spaces (&#8203;) to create break points.

Upvotes: 4

Armstrongest
Armstrongest

Reputation: 15409

One slightly hackish way of doing this is by processing the text to add space between each letter. Replace spaces with &nbsp; Then use the letter-spacing css attribute to bring the spaces down.

I know, it's a hack... but if NOTHING else works, it should wrap without problem.

Upvotes: -1

Related Questions