我想为我的应用构建一个摘录过滤器。
从我的后端我得到一个这样的字符串:
<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>"}
我像这样将这些数据插入到我的 View 中:
<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>
最佳答案
在使用 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: " ";
}
这不是我想要的解决方案,但这对我有用。这是一个 fiddle :
关于javascript - AngularJs 添加 ... 并将所有标签关闭到摘录,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38199902/