How do I wrap text with no whitespace inside a ?

Question

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.

score 230 · Answer 1 · edited Feb 28 '20 at 13:39

230

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>

edited Feb 28 '20 at 13:39

Steve Chambers

37,270
24
156
208

answered Feb 24 '11 at 17:39

Stirling

4,308
3
23
16

12

Ouch!! This will force breaking ANY word at arbitrary points even when not needed. Is there a workaround to have this break words ONLY when it's needed to not exceed the container's width? That is, to have it work the way "word-wrap: break-wird" is supposed to work in the first place if it wasn't buggy? – matteo Jun 14 '13 at 16:20
1

@matteo this answer worked better for me for that very reason: http://stackoverflow.com/a/18706058/234132 – dochoffiday Dec 11 '15 at 20:32
4

Force breaking problem can be solved with ``word-break: break-word;`` – user1721713 Jun 13 '18 at 20:39
This was enough word-wrap: break-word; – vishva8kumara Aug 02 '23 at 14:34

score 18 · Answer 2 · edited Sep 03 '19 at 16:13

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.

score 13 · Answer 3 · answered Sep 04 '14 at 15:41

13

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.

answered Sep 04 '14 at 15:41

XDM

131
1
3

I don't understand why, but it *only* works with `max-width`, and not with `width`. Nonetheless the best solution for me, because it doesn't break up words at arbitrary points. – Thomas Glaser Jan 11 '18 at 09:13

score 4 · Answer 4 · answered Jul 15 '10 at 08:35

4

You can manually inject zero width spaces () to create break points.

answered Jul 15 '10 at 08:35

kingjeffrey

14,894
6
42
47

1

There is also a non-standard HTML tag `` [for "word break"]. Here is the browser support for this and the `` solution: http://www.quirksmode.org/oddsandends/wbr.html – kingjeffrey Jul 15 '10 at 08:41

score 3 · Answer 5 · edited Dec 18 '15 at 18:30

3

Set a column width for the td tag.

edited Dec 18 '15 at 18:30

Kirby

15,127
10
89
104

answered Jul 14 '10 at 14:53

Black Frog

11,595
1
35
66

score 2 · Answer 6 · answered Aug 04 '21 at 13:26

2

What worked for me was:

.output {

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

}

answered Aug 04 '21 at 13:26

Spinstaz

287
6
12

score 0 · Answer 7 · answered Jul 17 '10 at 11:40

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/

score 0 · Answer 8 · answered Jan 17 '17 at 15:38

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.

score 0 · Answer 9 · answered Aug 04 '23 at 07:46

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

score -1 · Answer 10 · answered Jul 14 '10 at 18:04

-1

One slightly hackish way of doing this is by processing the text to add space between each letter. Replace spaces with   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.

answered Jul 14 '10 at 18:04

Armstrongest

15,181
13
67
106

2

It's so hacky, so disrupting correct indexing and so hard to implement it shouldn't be an answer at all :-) – Capsule Nov 02 '15 at 01:51

How do I wrap text with no whitespace inside a ?

10 Answers10

Linked

Related