How to handle long words In email newsletter design for yahoo and AOL mail

Question

Actually I'm creating newsletter design which is two columns, and it has images, title and text on each column respectively. Currently, facing layout styling issues where I can't able to handle long German word which is "Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft" for title content

Currently, this is the html4 table structure i'm using

<table cellpadding="0" cellspacing="0" border="0" align="center" width="100%" style="margin:0 auto;padding:32px 0 0 0;background-color:#f8f6f1;word-wrap:break-word;word-break:break-all">
  <tbody><tr>
    <td style="padding:20px">
      <table cellpadding="0" cellspacing="0" border="0" align="center" width="600" style="margin:0 auto">
        <tbody>
        <tr>
          <td style="background-color:#ffffff">
           
<table cellpadding="0" cellspacing="0" width="100%" border="0" style="background-color:#ffffff;color:#000000">
  <tbody><tr>
    <td width="50%" valign="middle" style="width:50%;padding:20px 10px 10px 20px;overflow:hidden;vertical-align:middle">
     <img src="https://dummyimage.com/300" width="100%" height="auto" style="display:block;height:auto;width:100%" alt="">    </td>
    <td width="50%" valign="middle" style="width:50%;padding:20px 20px 10px 10px;overflow:hidden;vertical-align:middle">
     <img src="https://dummyimage.com/300" width="100%" height="auto" style="display:block;height:auto;width:100%" alt="">    </td>
  </tr>
   <tr>
    <td width="50%" valign="middle" style="width:50%;padding:10px 10px 5px 20px;overflow:hidden;word-wrap:break-word;word-break:break-all;vertical-align:middle">
            <h2 style="margin:0;padding:0">
        Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft</h2>
         </td>
    <td width="50%" valign="middle" style="width:50%;padding:10px 20px 5px 10px;overflow:hidden;word-wrap:break-word;word-break:break-all;vertical-align:middle">
            <h2 style="margin:0;padding:0">
        Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft</h2>
         </td>
  </tr>
   <tr>
    <td width="50%" valign="middle" style="width:50%;padding:0 10px 20px 20px;overflow:hidden;word-wrap:break-word;word-break:break-all;vertical-align:middle">
     <p>Et epicurei phaedrum mnesarchum has, quem primis ancillae est ad, cetero tractatos mei in? Pri te laoreet postulant, te fugit accusata eam!</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate.</p>
     
               <a style="display:inline-block;color:#f6c3aa;text-decoration:none" href="https://www.caniemail.com/search/?s=margin" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.caniemail.com/search/?s%3Dmargin&amp;source=gmail&amp;ust=1709898494141000&amp;usg=AOvVaw0ibbIDF5zZyxhZPKgn8I9T">
            <span style="color:#f6c3aa;text-decoration:none">rindfleischetikettierungsü<wbr>berwachungsaufgabenübertragung<wbr>sgesetz</span>
          </a>
                              </td>
    <td width="50%" valign="middle" style="width:50%;padding:0 20px 20px 10px;overflow:hidden;word-wrap:break-word;word-break:break-all;vertical-align:middle">
     <p>Et epicurei phaedrum mnesarchum has, quem primis ancillae est ad, cetero tractatos mei in? Pri te laoreet postulant, te fugit accusata eam!</p>

<p>Duis autem vel eum iriure dolor in hendrerit in vulputate.</p>
 
               <a style="display:inline-block;color:#f6c3aa;text-decoration:none" href="https://www.caniemail.com/search/?s=margin" target="_blank" data-saferedirecturl="https://www.google.com/url?q=https://www.caniemail.com/search/?s%3Dmargin&amp;source=gmail&amp;ust=1709898494141000&amp;usg=AOvVaw0ibbIDF5zZyxhZPKgn8I9T">
            <span style="color:#f6c3aa;text-decoration:none">rindfleischetikettierungsü<wbr>berwachungsaufgabenübertragung<wbr>sgesetz</span>
          </a>
                              </td>
  </tr>
</tbody></table>          </td>
        </tr>
        </tbody>


        <tfoot>
        <tr>
          <td align="center" style="text-align:center;padding:16px">
            <small style="font-size:10px;color:#4a4847">
              Powered by <a href="#" style="color:#4a4847" target="_blank" data-saferedirecturl="#">TYRIO</a>
            </small>
          </td>
        </tr>
        </tfoot>
      </table>
    </td>
  </tr>
</tbody></table>

How to handle these type of scenarios while coming to email newsletter design. Reference screenshot provided below for yahoo and AOL mail.

Screenshot

Answer 1

There are two main methods. Apply a wrapping style, or add something to the text itself.

I don't believe there are any valid wrapping styles that can used here as Yahoo/AOL doesn't support it, as you've found e.g. a style "word-break: break-all" is not supported (https://www.caniemail.com/features/css-word-break/). "Overflow" should work though - but is less than ideal.

Best bet is to add <wbr> several times in the middle of the text. This is an optional br (break), and will be used to wrap the text at that point if the email client needs it.

ie:

Donaudampf<wbr>schiffahrt<wbr>selektrizitäten<wbr>haupt<wbr>betriebswerk<wbr>bauunterbeamten<wbr>gesellschaft