How to auto break text in an HTML cell?

Question

I am generating an HTML page which is later converted as a PDF showing a certain grid of data. For that I am using an HTML table. The table used to stretch whenever the text is long causing half of it to disappear from the PDF (to the left).

I managed to fix the table width using table-layout: fixed. Now I am facing the case where the text is either showing on top of each other or it no longer visible if it is too long. Here is a sample:

• Open this link : http://www.w3schools.com/cssref/tryit.asp?filename=trycss_table_table-layout
• Check the second table
• Add many zeros to the second column of the second table and click Submit code
• Check how the table looks like.

I am looking for a convenient way to auto-add a line break whenever the text reaches the cell boundaries.

Answer 1

You should use word-break CSS property.

Check this jsFiddle

HTML

<table class="ex2" border="1" width="100%">
    <tr>
        <td width="5%">1000000000000000000000000000</td>
        <td width="95%">1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</td>
    </tr>
</table>

CSS

table.ex2 {
    table-layout:fixed;
    word-break: break-all;
}

Answer 2

If you want the words to be breaked according to the boundaries like the below pic

Use the CSS code

word-break: break-all;