How to wrap text using CSS?

Question

<td>gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</td>

How do I get text like this to wrap in CSS?

Not CSS so not an answer but using a text field to hold it...just saying — Mark Schultheiss, Oct 16 '10 at 17:12
Eugh. Inputs are there to display input. I thought we had managed to get beyond lying about semantics for presentational purposes. — Quentin, Oct 17 '10 at 08:49

score 134 · Answer 1 · edited Nov 22 '17 at 17:47

134

If you type "AAAAAAAAAAAAAAAAAAAAAARRRRRRRRRRRRRRRRRRRRRRGGGGGGGGGGGGGGGGGGGGG" this 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. It works on all of them.

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

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

edited Nov 22 '17 at 17:47

Ben Kalsky

148
1
16

answered Feb 24 '11 at 17:43

Stirling

4,188
3
22
16

2

I added "word-wrap: break-word;" but didnt work neither in Firefox nor in IE(I tested only in these two)... n when I added all the option you suggested.. it worked... Thanks!!! – UID Dec 11 '13 at 21:15
2

I had to add "white-space: -webkit-pre-wrap;" to get new versions of Chrome (and probably Safari) to work. – George Oct 12 '14 at 01:02
thanks, it worked! bootstrap was doing a thing on its own, and nothing helped. Finally the right solution for me. – 3xCh1_23 Aug 18 '16 at 15:26
Thanks a lot, you are great! – Danilo Venegas Aug 23 '19 at 15:00
`word-break: break-all;` works – onmyway133 Jun 22 '20 at 22:34

score 106 · Accepted Answer · edited Nov 19 '17 at 10:55

106

Try doing this. Works for IE8, FF3.6, Chrome

<body>
  <table>
    <tr>
      <td>
        <div style="word-wrap: break-word; width: 100px">gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div>
      </td>
    </tr>
  </table>
</body>

edited Nov 19 '17 at 10:55

Ben Kalsky

148
1
16

answered Oct 16 '10 at 18:36

Gaurav Saxena

4,237
3
18
17

8

This was not working for me, but @Stirling's answer below did work. – Zarepheth Feb 18 '14 at 16:25
1

tested it myslef and it works great! i assume that the only "problem" here, is that you have to set manually the size of the container (100px in this example) – ymz Dec 26 '14 at 11:09
This also works: .truncate { width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } – Jacques Koekemoer Jun 03 '15 at 11:50
freaking tables, always solve the issues! – 3xCh1_23 Aug 18 '16 at 15:04
1

Use "word-break: break-all;" to avoid mentioning "width". – Web_Developer Aug 08 '18 at 11:00

score 1 · Answer 3 · edited May 29 '19 at 15:36

1

This will work everywhere.

<body>
  <table style="table-layout:fixed;">
  <tr>
    <td><div style="word-wrap: break-word; width: 100px" > gdfggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg</div></td>
  </tr>
  </table>
 </body>

edited May 29 '19 at 15:36

Benj

638
7
20

answered Jul 15 '14 at 05:28

Atul.Bajare

37
4

score 1 · Answer 4 · answered Oct 16 '10 at 16:41

1

With text-wrap, browser support is relatively weak (as you might expect from from a draft spec).

You are better off taking steps to ensure the data doesn't have long strings of non-white-space.

answered Oct 16 '10 at 16:41

Quentin

857,932
118
1,152
1,264

13

"To avoid some display error, please do not input long words." Is that really your answer? – SandRock Jan 05 '14 at 21:38
2

@SandRock — No, it isn't. That is a mischaracterisation of *half* of this answer. The data in the question, while being a "long string of non-white-space" was not a "word". "taking steps" also doesn't mean "don't input", we don't know where the data is coming from, it could mean testing user input for sanity and displaying an error message for inappropriate content. – Quentin Jan 05 '14 at 21:40

netadictos · Answer 5 · 2010-10-16T20:20:40.077

0

The better option if you cannot control user input, it is to establish the css property, overflow:hidden, so if the string is superior to the width, it will not deform the design.

Edited:

I like the answer: "word-wrap: break-word", and for those browsers that do not support it, for example, IE6 or IE7, I would use my solution.

edited Oct 16 '10 at 20:20

answered Oct 16 '10 at 16:43

netadictos

7,514
1
40
69

2

If you're going to use this option be sure to set a width for the element containing the text or overflow:hidden will simply hide the overflow, not wrap it. – jay Oct 16 '10 at 17:03

How to wrap text using CSS?

5 Answers5

Linked