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 🙂