If you want the words to be breaked according to the boundaries like the below pic
Use the CSS code
word-break: break-all;
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:
Submit code
I am looking for a convenient way to auto-add a line break whenever the text reaches the cell boundaries.
Solution
If you want the words to be breaked according to the boundaries like the below pic
Use the CSS code
word-break: break-all;
OTHER TIPS
You should use word-break
CSS property.
<table class="ex2" border="1" width="100%">
<tr>
<td width="5%">1000000000000000000000000000</td>
<td width="95%">1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000</td>
</tr>
</table>
table.ex2 {
table-layout:fixed;
word-break: break-all;
}