在AngularJS Material Design中，如何隐藏`md-toolbar`中的溢出文本？

Question

类似的东西：

    <md-toolbar>
        <div class="md-toolbar-tools">
            <paper-icon-button icon="arrow-back" nav-to="{{$root.navTo}}"></paper-icon-button>
            <span flex>{{$root.title}}</span>
        </div>
    </md-toolbar>

但是当$root.title很长时，文本将只包含几行。我想要的是text-overflow: ellipsis;的效果，但在<span>中添加它并不起作用。那我该怎么办？

Answer 1

一些问题：

• 跨度并不知道标题的最大宽度，因此无法判断标题是否溢出。
• Spans无法溢出，您需要将其更改为div。

参见我做过的这个粗略的例子：

http://plnkr.co/edit/u0z58vvCDLvTrfZHgkBm

<div>
    <div style="overflow: hidden; text-overflow: ellipsis; width: 50px">
        THIS IS LONG TEXT TTTTTTTTE EEEEEEEEEEEE EEEEEEEEEEEEEE SSSSSSSSSSSSSSSS VVVVVVVVVVVVVVVVVVVW
    </div>
</div>

可能比依靠CSS盲目做得更好的解决方案是要么确保你不能输入太长的标题。或者提出一个为你修剪字符串的指令。