Small Tips and Tricks – HTML – Wrapping text in table column in Content Editor webpart

Hi All,
Greetings for the day!!!
Today I got an issue from one of our Microsoft 365 Intranet user – Text is not getting wrapped in Table column in Content Editor webpart on classic site
Background :
- One of our user in tenant have classic site and using Content Editor web part to show some reports / details of data in tabular format
- In one of the column has long text and which is not wrapping up
- Even there is no horizontal scroll bar appearing
- We need to select the text and scroll all the way by dragging mouse
- Tested in all browsers, same issue
So small POC and thought to share
Demo / POC :
- I created one classic site in my local tenant
- Added Content Editor web part on classic page
- Added same HTML as in our Intranet site as shown in below code section
<table style="width: 100%;" >
<thead>
<tr>
<th>very long word</th>
</tr>
</thead>
<tbody>
<tr>
<td>LIFEISBEAUTIFUL.KNOWLEDGEJUNCTIONISROCKING.SHARINGISCARINGLIFEISBEAUTIFUL.KNOWLEDGEJUNCTIONISROCKING.SHARINGISCARINGLIFEISBEAUTIFUL.KNOWLEDGEJUNCTIONISROCKING.SHARINGISCARING</td>
</tr>
</tbody>
</table>
<br/>
- Output on page will be appearing as – long text in one line
Solution :
- There is simple solution. Easily found on googling. Might be I was not aware since long time not worked on HTML
- We need to update our HTML at two places
- Using “word-break” attribute of style property of <td> with value “break-all”
<td style="word-break: break-all;">
- Using “table-layout” attribute of style property of <table> with value “fixed” as
<table style="width: 100%; table-layout: fixed;">
Complete HTML :
<table style="width: 100%; table-layout: fixed;">
<thead>
<tr>
<th>very long word</th>
</tr>
</thead>
<tbody>
<tr>
<td style="word-break: break-all;"> LIFEISBEAUTIFUL.KNOWLEDGEJUNCTIONISROCKING.SHARINGISCARINGLIFEISBEAUTIFUL.KNOWLEDGEJUNCTIONISROCKING.SHARINGISCARINGLIFEISBEAUTIFUL.KNOWLEDGEJUNCTIONISROCKING.SHARINGISCARING</td>
</tr>
</tbody>
</table>
<br/>
- Output will be – text is wrapped 🙂
Thanks for reading !!! Please feel free to discuss / suggestions / share thoughts !!!
HAVE A GREAT TIME AHEAD !!! LIFE IS BEAUTIFUL 🙂
You must log in to post a comment.