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是基于角度js和ng-repeat的其他属性动态生成的。

Answer 1

这个问题已被提出： With CSS, use "..." for overflowed block of multi-lines - 编辑：此问题仅适用于jQuery解决方案。既然OP适用于Angular而不是jQuery，我认为它可能是有效的结束编辑

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

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

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

以下是仅限css解决方案的示例。如你所见，它非常混乱。

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

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

^你走了。由于您已经使用angular生成内容，因此我确定将此小脚本添加到函数中应该没问题，对吗？

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

1 个答案: