Word wrap in table cell

Question

I trying to apply word-wrap in the table cell, but it's not working.

Line wraps if file name contain space, but if space not there my table going out of div.

I also tried word-wrap and width property to table cell.

display: table-cell;
width: 50%;
word-wrap: break-word;

It works with fix width in pixels, but i can't to that because i need to manage design in all width device.

What css i can apply to make word wrap if table cell have no more space to grow ?

Thanks

Possible duplicate of [Word-wrap in an HTML table](https://stackoverflow.com/questions/1258416/word-wrap-in-an-html-table) — Athul Nath, Mar 28 '18 at 11:18

Suresh Ponnukalai · Accepted Answer · 2018-03-28T11:21:17.650

1

Use word-break:break-all instead of word-wrap: break-word;

display: table-cell;
width: 50%;
word-break:break-all;

td {
  width:33.3%;
  word-break:break-all;
}

<table>
<tr>
  <td>largcontent_without_sapce_large_content_without_space</td>
  <td>Samll Content</td>
  <td>Test Content</td>
</tr>
<tr>
  <td>largcontent_without_sapce_large_content_without_space_content_without_space</td>
  <td>Samll Content</td>
  <td>Test Content</td>
</tr>
<tr>
  <td>largcontent_without_sapce_large_content_without_space</td>
  <td>Samll Content</td>
  <td>Test Content</td>
</tr>
</table>

edited Mar 28 '18 at 11:21

answered Mar 28 '18 at 11:17

Suresh Ponnukalai

13,820
5
34
54

also consider using overflow-wrap https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap – George Mar 28 '18 at 11:18
@LalitTarsariya nice to hear that it helped you. – Suresh Ponnukalai Mar 28 '18 at 11:26

score 1 · Answer 2 · answered Mar 28 '18 at 11:21

1

You can use overflow property of css in your table.

overflow:auto;

This will be working for every screen size.

answered Mar 28 '18 at 11:21

vishulg

149
1
6

Word wrap in table cell

2 Answers2