AngularJs 添加 ... 并关闭摘录的所有标签

Question

我想为我的应用构建摘录过滤器。

从我的后端我得到一个这样的字符串：

<p>this is gonna be a very long text</p>

使用 Angluarjs 的 LimitTo 我得到：

<p>this is gonna be a ver

但我想要这个：

<p>this is gonna be a ver...</p>

我之所以要关闭这些标签，是因为我可以从我的后端获取任何可能的标签。

我如何检查是否所有元素都已关闭并将 ... 添加到最后一个元素？

编辑：

这里有一个更好的例子：

我从后端得到一个 JSON，例如：

{ text: "<p>This is a very long text with a <a href=\"#\">very long link</a> and some more attributes. Propably a <img src=\"image.png\"> too.</p>"}

我像这样将此数据插入到我的视图中：

<div ng-bind-html="json.text"></div>

结果应如下所示：

<div>
  <p>This is a very long text with a <a href=\"#\">very long</a>...</p>
  <button>read more</button>
</div>

如果我的字符串中有图片并且我的 "cut" 在此标签中，我想删除该图片。所以我得到

<div>
  <p>This is a very long text with a <a href=\"#\">very long link</a> and some more attributes. Propably a ...</p>
  <button>read more</button>
</div>

而不是

<div>
  <p>This is a very long text with a <a href=\"#\">very long link</a> and some more attributes. Propably a <img sr...</p>
  <button>read more</button>
</div>

Answer 1

如果你只是想截断文本，你可以使用 css 比如：

p {
  overflow: hidden;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}

看到这个jsFiddle。

编辑：通过修改显示文字，可以模拟hide/show的效果，看这个jsFiddle.

Answer 2

在使用 RegExp 进行大量测试后，我决定使用另一种技术。

如果其他人有类似的问题，我想 post 我的解决方案。

.text__wrapper {
  position: relative;
  width: 300px;
  margin: auto;
}    

.text-preview {
  margin-bottom: 35px;
  padding: 0 15px;
  box-sizing: border-box;
  display: block;
  max-height: 140px;
  overflow: hidden;
  white-space: normal;
}

.text-preview:after {
  top: 115px;
  width: 100%;
  height: 25px;
  background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(255,255,255,1) 100%); 
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#FFFFFF',GradientType=0 ); 
  position: absolute;
  left: 0;
  content: " ";
}

这不是我想要的解决方案，但这对我有用。这是一个 fiddle:

https://jsfiddle.net/2s09e2dv/

AngularJs 添加 ... 并关闭摘录的所有标签

AngularJs Adding ... and close all tags to an excerpt

javascript

directive

angularjs