使用基于 div 高度的 CSS 截断多行文本答案

【问题标题】：Truncate Multi Line Text Using CSS Based off of Div Height使用基于 div 高度的 CSS 截断多行文本
【发布时间】：2016-12-30 23:07:24
【问题描述】：

目前，我有一个设置高度的 div。

<div class="card yellow-task task" style="height: 255px;">
    <div class="div-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.....
    </div>
</div>

假设文本（当包裹在 div 的整个高度时）比 div 可以包含的长度要长，我将如何使用 CSS 截断文本？

我当前使用的代码使用-webkit-line-clamp 和ellipsis 来截断基于行的文本。

display: block;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;

不幸的是，我无法知道每个 div 中有多少行。这是一个问题，因为 div 是基于 angular js 和 ng-repeat 的其他属性动态生成的。

【问题讨论】：

@Jacob 实际上，我觉得不应该这样。这里的一个关键区别是这个人正在使用 AngularJS，而不是 jquery。 “重复”问题的答案仅指向 jQuery 解决方案，而我的指向 AngularJS 解决方案。我认为人们可能会从中受益。
好的，谢谢，很高兴知道。
div的高度，是不是也来自payload？还是您实际上在自己的 css 中定义它？
@choz div 的高度在 css 中定义，因为它是根据“任务”的持续时间计算得出的。

标签： html css angularjs truncate

【解决方案1】：

这个问题已经被问过了： With CSS, use "..." for overflowed block of multi-lines - edit: 这个问题只能用 jQuery 解决方案来回答。由于 OP 适用于 Angular 而不是 jQuery，我认为它可能是有效的 end edit

-- 多行省略实际上是 CSS 不支持的。您唯一的解决方案是 javascript 插件。

我花了大约 30 分钟的时间为您想出了一个纯 CSS 解决方案，但这些解决方案只能以草率的方式工作。例如;使用:after 伪选择器添加“...”，将其与右侧对齐。但是，对于动态内容，这通常会在“...”和最后一个单词之间产生巨大的差距。然后可以通过使用text-align:justify' 来防止这种情况，但老实说，这看起来也很糟糕！

http://codepen.io/natonischuk/pen/KpNKQZ

这是一个纯 CSS 解决方案的示例。如您所见，它非常混乱。

经过长时间的搜索，我找到了一个angularjs 插件。（我认为 90% 是jQuery？）

https://github.com/dibari/angular-ellipsis

^ 给你。既然你已经在用 Angular 生成内容了，我肯定把这个小脚本添加到函数中应该没问题，对吧？

【讨论】：