List items - how to stop text from wrapping

Hi folks,

A quick question regarding list items. It seems to be a default setting amongst browsers that list items don't wrap when the text associated with the <li> goes onto a second line. This is great. However, the same can't be said for the various mail clients out there. In other words, when testing on the mail clients I've used up to this pint a second line of text will display directly under the bullet point and not in line with the first line of text.

I've been messing around with display types but to no avail. Any ideas how I can get the second line of text to begin at the same point as the first line (directly right of the bullet point)?

jimmenycricket jimmenycricket, 4 years ago

Hi Bert,

I would personally ditch the li tag and head back to the td's.

for example

<table width="600" cellpadding="0" cellspacing="0" border="0">
      <tr>
          <td width="20"><img src="images/bullet.gif" style="display:block" width="20" height="10" border="0"></td>
          <td width="10"></td>
      <td>Bullet 1 Text here</td>
      </tr>
  </table>
  <table width="600" cellpadding="0" cellspacing="0" border="0">
      <tr>
          <td width="20"><img src="images/bullet.gif" style="display:block" width="20" height="10" border="0"></td>
          <td width="10"></td>
      <td>Bullet 2 Text here</td>
      </tr>
  </table>
  <table width="600" cellpadding="0" cellspacing="0" border="0">
      <tr>
          <td width="20"><img src="images/bullet.gif" style="display:block" width="20" height="10" border="0"></td>
          <td width="10"></td>
      <td>Bullet 3 Text here</td>
      </tr>
  </table>

To control the spacing of the text next to the bullet, alter the width of the 2nd (middle) td.

Hope this helps


Get in touch for any freelance work!

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free
1-888-533-8098