html - 在 Angular 中换行并截断长文本的问题

标签 html css angular

我在 Angular 中对长文本进行换行和截断时遇到问题。我想将文本换行成两行,如果超过两行,则在第二行末尾添加“...”。我不能使用纯 css,因为我的文字无法证明,它应该左对齐。它也应该在 Firefox 中工作,所以我不能使用 -webkit-line-clamp。我的文本容器和我的文本也应该是响应式的。

关于如何在 Angular 7 中处理它有什么建议吗?

最佳答案

在 Angular 中,您可以编写一个 ng-if 语句来检查值的长度,如果它大于某个数字,则添加省略号。

<span ng-if="textValue.length > 100" class="ng-scope">...</span>

对于包装你可以使用:

word-wrap: break-word; overflow-wrap: break-word;

有关更多信息,请参阅这篇 CSS 技巧文章 https://css-tricks.com/almanac/properties/o/overflow-wrap/

关于html - 在 Angular 中换行并截断长文本的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56011404/

相关文章:

html - Bootstrap 嵌套列利用推/拉

html - 相对定位的 HTML 元素与父元素重叠

javascript - 在 Javascript 中鼠标悬停时棘手的按钮会移动吗?

html - 在一个类中使用多个 +(加)运算符是否合法?

css - 如何使用滚动条使页眉和页脚之间的内容 100%

angular - 从单个 Observable 返回同步和异步值的混合

angular - 导出到 Excel 时格式化单元格

javascript - 正在做破坏吗?

image - 如何用html5/css3技术替换图片

javascript - 在 Typescript 中使用多个字符串数组