Using ‘word-wrap: break-word’ within a table
As you can implement word wrapping efficiently with <div> element. But it creates problem when we implement it with <table> table element. In below example, when we use “word-wrap:break-word” with <div> element and it works great.
- <div style=“width:100%; word-wrap: break-word;”>
- AAAAAAAAAAAAAAAAA
- ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
- </div>
Step 1: When the browser is wide enough, A+ and B+ are on the same line.
- AAAAAAAAAAAAAAAAA ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
Step 2: As you narrow the browser, A+ and B+ are put on separate lines.
- AAAAAAAAAAAAAAAAA
- ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
Step 3: When b+ can no longer fit, it is broken and put on two lines.
- AAAAAAAAAAAAAAAAA
- ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
- ZZZZZZ
All works great, but when we use <table> instead of <div>, it creates problem.
- <table style=“width:100%; word-wrap:break-word;”>
- <tr>
- <td>
- AAAAAAAAAAAAAAAAA
- ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
- </td>
- </tr>
- </table>
The table stops narrowing after step 2 and step 3 doesn’t ever happen. The break-word doesn’t seem to be filtering down.
Use “table-layout: fixed” with table:
So here we will use “table-layout: fixed” which will get force the cells to fit within table.
- <table style=“width:100%; word-wrap:break-word;table-layout: fixed;”>
- <tr>
- <td>
- AAAAAAAAAAAAAAAAA
- ZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZZ
- </td>
- </tr>
- </table>
The “table-layout: fixed” property will fixed the table width with its defined width and help “word-wrap:break-word” to work.
Follow @phpzag
