限制字符并在角度js和离子后有三个点

Question

我正在使用AngularJS和Ionic,我正在使用ng-bind-html从其他API中提取数据.我想限制字符数量,但在字符后面还有三个点,以显示用户还有更多要阅读的内容...

到目前为止,我有:

<p ng-bind-html="item.excerpt | limitTo: 100"></p>

但这只会限制角色并将其切断.

Answer 1

对于纯角度方法,您可以执行以下操作:

{{(item.excerpt | limitTo: 100) + (item.excerpt.length > 100 ? '...' : '')}}

Answer 2

老实说,你的问题似乎更倾向于css

您可以截断文本,并使用"省略号"添加点(...)

例如,如果你有html里面的东西:

<p class='ellipsis'>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur<p>

你在css上添加这样的东西:

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

p.block {
    width: 300px;
}

结果如下:

<p class='ellipsis'>Lorem ipsum dolor sit amet ...</p>

如果你想实现一个"阅读更多"的按钮,点击时,只需删除'省略号'类,就会显示所有文本.

更多信息: 省略信息