javascript - 使用具有 元素作为子元素的 css 和 javascript 停止切断可变高度 div 中的文本

Question

我有一个没有固定高度的 div，它有几个 <p> block 作为 child 。我一直在尝试使用 text-overflow 或 line-clamp，但这些似乎不适用于 child 。这导致文本有时会在中间被 chop 。我要尝试的是替换 <p> block <br> ，但似乎应该有更好的方法来做到这一点。在页面呈现之前我也不知道高度，所以我无法在模板中预先计算任何东西。有没有人有更明智的方法来解决这个问题？

编辑:添加示例

<div class="content">
<p>a big chunk of text</p>
<p>another chunk of text</p>
</div>

css 是这样的

.content {text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2;}

我尝试了不同的方式来混合和匹配这个，还有一些 <p> block 将被切断。

如果这看起来不错，请告诉我 - 有人建议可能有其他 css 干扰？页面上有很多 css，所以这是可能的。

编辑:另一个澄清。截止点是垂直的，而不是水平的。底部的文本在中间被 chop ，或者例如像 j 或 y 这样的字符将被 chop 尾部。

Answer 1

由于“溢出:隐藏；”，文本被水平切成两半，并且 div 的高度不足以容纳文本内容。

是什么限制了div的高度？