3

就像是：

    <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>不起作用。那我该怎么办？

4

1 回答 1

1

几个问题：

  • 跨度不知道您的标题应该是的最大宽度，因此它无法判断它是否溢出。
  • 跨度不能有溢出，您需要将其更改为 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 更好的解决方案是确保您不能输入太长的标题。或者提出一个为您修剪字符串的指令。

于 2014-12-22T09:55:03.460 回答