title: text-overflow: ellipsis fighting with direction: rtl
body: <p>I like displaying emails properly, meaning not [at]. 
  To fight the bots I reverse the text in the html and then re-reverse it with css using <code>direction: rtl</code>. That worked fine for many many years, until an email dared to break lines.</p>
  
  <p>You can see what happens on the screenshots; kinda hard to explain–</p>
  
  <p><em>Thats the mess that happens</em>
  <a href="https://i.stack.imgur.com/Hqkwy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hqkwy.png" alt="Thats the mess that happens"></a></p>
  
  <p><em>This is how it looks when there is enough space</em>
  <a href="https://i.stack.imgur.com/lS9J2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lS9J2.png" alt="And this is how it should look"></a></p>
  
  <p>The http-host is always the same, so I figured using <code>text-overflow: ellipsis</code> together with <code>white-space: nowrap</code> and <code>overflow: hidden</code> on the <code>&lt;a&gt;</code>. That went south aswell;</p>
  
  <p>(side note: it wasn't possible for me to fully highlight the visible text?)
  (The end of the highlight is NOT the end of the box!)
  <a href="https://i.stack.imgur.com/MXS48.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MXS48.png" alt="enter image description here"></a></p>
  
  <p>Okay; the text-overflow clipping comes first, then the reversing; I get it.
  So lets put <code>overflow: hidden</code> and <code>text-overflow: ellipsis</code> on the parent, which is a <code>&lt;p&gt;</code> and the <code>white-space: nowrap</code> on the <code>a</code> (scared that a telephone number will get chopped off)</p>
  
  <p></p>
  
  <p>I played around with a combination which styles go to the <code>p</code> and which to the <code>a</code> .. and I had one solution (which I unfortunately can't reproduce oO) where the dots were at the right side (which is what I want) but the text still gets chopped of an the visual left of the outcome, meaning the name name of the email, which I do not want to clip!</p>
  
  <p><a href="https://i.stack.imgur.com/7omkp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7omkp.png" alt="enter image description here"></a></p>
  
  <p>Long question short..
  How can I get the following result?
  <code>S.Rossa@park-reside...</code></p>
  
  <p>When my email markup looks like this:</p>
  
  <pre><code>&lt;a href="/email.php?to=rossa" class="direction"&gt;
  &lt;?php echo strrev("S.Rossa@park-residenz-alfeld.de"); ?&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>Out of many reasons I cannot go back from the <code>direction: rtl</code> thing on the emails.</p>
  
  <p>Please keep that in mind when suggesting a way to</p>
  
  <ol>
  <li><p>keep the email from breaking lines, no matter what</p></li>
  <li><p>and a convenient way to clip it with ...</p></li>
  <li><p>with css only</p></li>
  </ol>
  
  <p>Thanks!</p>