title: How to target specific links in email clients (Microsoft Outlook)?
body: <p>I'm trying to add a word break to some email links, but don't want to apply the style to all the content.</p>
  
  <p>If I apply the following CSS, all content (including the links) breaks onto the following line:</p>
  
  <pre><code>html, body, table {
      word-break: break-all !important;
  }
  </code></pre>
  
  <p>This results in: <a href="https://gyazo.com/60e081771f7de04402da60dcad63ea6e" rel="nofollow noreferrer">https://gyazo.com/60e081771f7de04402da60dcad63ea6e</a></p>
  
  <p>However, the line break doesn't work when I try to apply it only to specific elements using the following css:</p>
  
  <pre><code>table tr td span.word-break * {
      word-break: break-all !important;
  }
  </code></pre>
  
  <p>This css results in: <a href="https://gyazo.com/23f0a413e21b668bc713dbb7a5af90ff" rel="nofollow noreferrer">https://gyazo.com/23f0a413e21b668bc713dbb7a5af90ff</a></p>
  
  <p>The HTML i'm using is:</p>
  
  <pre><code>&lt;span class='word-break'&gt;&lt;a href='www.google.com'&gt;long_link_000000000000000000000&lt;/a&gt;&lt;/span&gt;
  &lt;span class='word-break'&gt;test.email@evenlongertest.com&lt;/span&gt;
  </code></pre>
  
  <p>I have tried multiple variations of the CSS but can't seem to apply the style specifically to the links. If I change the colour to red to test the selection, it works in the browser but not in the email client.</p>