13

Is there a solution to use word-break on white-space: pre?

I got a list like this, all came from data base, and I can't change it to ul li, but I want to show up like that so I then used white-space: pre, but it does not break words.

td {
    white-space: pre;
    word-break: break-word;
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}
<table>
<tr><th>list</th>
<td>
1.testtesttesttesttesttesttesttesttest
2.hihihihihihihihihihihihihihihihihihi
3.hurayhurayhurayhurayhurayhurayhuray
4.testtesttesttesttesttesttesttesttest
</td>
</tr>
</table>

Or use something like white-space: pre to break each item to new line with breaking words?

4
  • Why can't you format it using an <ol>? That would be far more semantic.
    – BenM
    Commented Dec 15, 2016 at 17:20
  • @BenM it all came from database it's not just a one entry
    – Pedram
    Commented Dec 15, 2016 at 17:22
  • And? Why does that mean you can't format it as you wish?
    – BenM
    Commented Dec 15, 2016 at 17:22
  • i can change texts but it not translate html tags @BenM
    – Pedram
    Commented Dec 15, 2016 at 17:24

1 Answer 1

16

Use white-space: pre-wrap; Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

td {
   word-break: break-word;
   white-space: pre-wrap;
   -moz-white-space: pre-wrap;      
}

table {
    width: 100px;
    border: 1px solid black;
    display: block;
}
<table>
<tr><th>list</th>
<td>
1.testtesttesttesttesttesttesttesttest
2.hihihihihihihihihihihihihihihihihihi
3.hurayhurayhurayhurayhurayhurayhuray
4.testtesttesttesttesttesttesttesttest
</td>
</tr>
</table>

5
  • This doesn't work on Firefox. seems to work ok on chrome though.
    – andi
    Commented Dec 15, 2016 at 17:41
  • 1
    @pedram I'm looking at "Run code snippet" right now in Firefox v50.0.2 and it's not working. The long words don't wrap and extend out of the box. not sure what you're seeing.
    – andi
    Commented Dec 15, 2016 at 17:51
  • @andi you right, same here. but weird.. it works on my website !
    – Pedram
    Commented Dec 15, 2016 at 17:54
  • FF needs prefixing. try white-space: pre-wrap; and -moz-white-space: pre-wrap;
    – user7234396
    Commented Dec 15, 2016 at 18:01
  • @andi how about overflow-wrap: break-word; or word-break: break-all? For now I can't test it by FF
    – Banzay
    Commented Dec 15, 2016 at 20:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.