Question

经过数小时的研究，我终于找到了一种适用于多个Line Ellipsis的有效方式（使用JS和纯CSS不可能）。 Google提供了100种不同的结果和Q / A，但是目前这是唯一一种有效的方法（仅是因为该方法不仅适用于Chrome，而且适用于IE 11，Firefox等）：

http://jsfiddle.net/Warspawn/9nz3T/

在我的情况下，此小提琴中的问题是，它假定被夹紧的文本位于单个html标记内（text-clamp ist是执行此操作的angular指令）：

 <p text-clamp="1">a normally very long text</p>

在我的情况下，我要固定的文本是h1，它包含多个元素：

<h1 text-clamp="1">{{getIntroText()}}
      <span>&nbsp;as&nbsp;
         <span class="highlight">{{getCount()}}</span>
      </span>
      <span>&nbsp;in&nbsp;
          <span class="highlight">{{getAnotherPart()}}</span>
      </span>
</h1>

如何使用我的html获取上述角度指令？

这是我的2.用我的h1标签摆弄： http://jsfiddle.net/9nqyLxuf/1/

预先感谢

Answer 1

只需使用HTML title标签在悬停时显示文本，而AngularJS limitTo指令即可解决问题

<h1 title="{{foo}}"> {{introText | limitTo:9}} as <span>{{text | limitTo:5}}</span> in {{text2 | limitTo:1}}...

Working fiddle

通过多级html标签的多行省略号（钳位），也可以在IE，Firefox等上使用

1 个答案: