title: In AngularJS Material Design, how to hide overflowed text in the `md-toolbar`?
body: <p>Something like:</p>
  
  <pre><code>    &lt;md-toolbar&gt;
          &lt;div class="md-toolbar-tools"&gt;
              &lt;paper-icon-button icon="arrow-back" nav-to="{{$root.navTo}}"&gt;&lt;/paper-icon-button&gt;
              &lt;span flex&gt;{{$root.title}}&lt;/span&gt;
          &lt;/div&gt;
      &lt;/md-toolbar&gt;
  </code></pre>
  
  <p>But when <code>$root.title</code> is very long, the text will just wrap to several lines. What I want is the effect of <code>text-overflow: ellipsis;</code>, but adding it in <code>&lt;span&gt;</code> didn't work. So how do I do?</p>