javascript - 设置 DIV 高度，这样文本就不会被水平切割或切片

Question

是否有任何 JS/CSS/jQuery 魔法可以识别 div 中最后可见的内容是否被 chop ，并稍微增加/减小 DIV 的高度以防止 chop 文本？

我们的系统允许用户输入包含 XHTML 的“元素”(使用 Telerik Edit 控件)。我们有一个 ElementList 页面，我们在其中显示所有用户输入的元素。但是，由于用户输入的 XHTML 可能非常大，因此在列表页面上我们只想显示每行的前 3 行。所以我将包含 XHTML 的 DIV 设置为等于 3 行文本的特定高度，并设置溢出:隐藏。到目前为止，还不错。

但是，由于用户可以输入 XHTML，他们可以创建带有填充(或以其他方式偏离标准文本高度)的表格。由于高度和 overflow: hidden 的组合，这些单元格中的文本似乎被水平切掉了。我们的需求人员不喜欢这个样子；但当然我们不能限制最终用户可编辑的 XHTML。

Here is a JSFiddle example的问题。

这个问题不是重复的:

• “Stopping cut off text in variable height div... ”，因为该问题涉及与我的情况无关的“webkit-line-clamp”。 (无论如何，这个问题从未得到回答)
• "Cut text by height, no truncate "因为这个问题是关于包含纯文本的 DIV；我的 DIV 包含 XHTML。您会在 JSFiddle 中注意到我已经使用 em 测量调整 DIV 高度。

这个问题让我百思不得其解——我希望 SO 社区能来救我!

更新:

最终，我怀疑这无法使用 HTML/JS/jQuery 解决。事实上，您可以制作一个顶部边距逐渐增加的表格(或一系列 DIV)，这样就无法避免至少对其中一个进行切片。

感谢大家的回复。我将其中一个标记为答案，因为在我看来，这是一个特别简单/优雅的解决方法。

Answer 1

这不是您正在寻找的解决方案，但它可能是一个很好的设计解决方案。我在 div 的底部放置了一个白色渐变，这样它就创建了一种“视觉省略号”

看看:http://jsfiddle.net/robertofrega/LkYjs/3/

它不像简单切割文本时那样难看。