title: CSS ignore child element but not text
body: <p>I have the following HTML</p>
  
  <pre><code>&lt;div class='parent'&gt;
    &lt;span&gt;
      &lt;svg /&gt; this is some text 
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.parent {  
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  svg {
    margin-left: -5px; // &lt;- breaks it
  }
  </code></pre>
  
  <p>text-overflow: ellipses; doesn't work here but <em>does</em> when I take out the SVG image. Is there a way to add this styling to just the span's text and ignore the svg completely?</p>
  
  <p>example: <a href="https://jsfiddle.net/htp7hv0u/1/" rel="nofollow noreferrer">https://jsfiddle.net/htp7hv0u/1/</a></p>