Multiple Line Ellipsis (clamp) 通过多级 html 标签，也适用于 IE、Firefox 等答案

【问题标题】：Multiple Line Ellipsis (clamp) through multi level html tags, which also works on IE, Firefox etcMultiple Line Ellipsis (clamp) 通过多级 html 标签，也适用于 IE、Firefox 等
【发布时间】：2019-06-28 19:10:21
【问题描述】：

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

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

在我的例子中，这个小提琴的问题是，它假设被钳制的文本在一个单独的 html 标记内（文本钳是完成这项工作的角度指令）：

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

提前致谢，

【问题讨论】：

是否有任何理由使用 angularjs 1.1.1？...我们正在谈论 2012 版本。
no.. 这只是 1. fiddle 中使用的版本.. 但 angularJS 仍然是必须的（不幸的是）

标签： javascript css angularjs

【解决方案1】：

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

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

Working fiddle

【讨论】：

我不想限制文本的长度，但有一个最大行数（上面的 text-clamp="1"）.. 所以这并不容易.. 文本也取决于您当前浏览器窗口的宽度等。