使用 CSS 基于 Div 高度截断多行文本

Question

目前，我有一个 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.

Answer 1

这个问题已经有人问过： With CSS, use "..." for overflowed block of multi-lines - 编辑： 这个问题只能用 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 生成内容，我确定将这个小脚本添加到函数中应该没问题，对吧？

使用 CSS 基于 Div 高度截断多行文本

Truncate Multi Line Text Using CSS Based off of Div Height

html

css

angularjs

truncate