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>

如果我的字符串中有图像并且我的“剪切”在此标记中，我想删除图像。所以我得到了

<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

用RegExp做了很多测试后，我决定使用另一种技术。

如果其他人得到了一个类似的问题，我想发布我的解决方案。

.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: " ";
}

这不是我想要的解决方案，但这对我有用。这是一个小提琴：

https://jsfiddle.net/2s09e2dv/

Answer 2

如果您只想截断文本，可以使用css：

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

请参阅此jsFiddle。

编辑：通过修改显示文本，您可以模拟隐藏/显示效果，请参阅此jsFiddle。

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

2 个答案: