Javascript 在AngularJS材质设计中，如何在“md工具栏”中隐藏溢出的文本？

比如：

    <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}

但是当

$root.title

很长时，文本只会换行几行。我想要的是

文本溢出的效果：省略号，但将其添加到
中无效。那我该怎么办呢？
有几个问题：


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

看看我举的这个粗略的例子：



这是长文本TTTTTTTTT E EEEEEEEEEEEEEEEEEEEEEEE SSSSSSSSSSSSS VVVVVVVV W

可能比盲目依赖CSS更好的解决方案是，要么确保不能输入太长的标题。或者提出一个为您修剪字符串的指令。
谢谢Varedis，我尝试使用
div
添加您提到的三种样式，但都没有效果。我不擅长CSS，但我想可能是因为angularjs改变了一些东西。。。我将编写一个过滤器来限制长度……当您不知道工具栏的大小时，此解决方案不起作用。例如，针对响应性尺寸。我认为这是一个棘手的问题
<div>
    <div style="overflow: hidden; text-overflow: ellipsis; width: 50px">
        THIS IS LONG TEXT TTTTTTTTE EEEEEEEEEEEE EEEEEEEEEEEEEE SSSSSSSSSSSSSSSS VVVVVVVVVVVVVVVVVVVW
    </div>
</div>