设置DIV高度,使文本不会水平切割或切片

时间:2012-03-19 19:31:08

标签: javascript jquery html css

是否有任何JS / CSS / jQuery魔法可以识别div中内容的最后一个可见位是否被切断,并略微增加/减少DIV的高度以防止切断文本?

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

但是,由于用户可以输入XHTML,因此他们可以使用填充(或以其他方式偏离标准文本高度)创建表。由于高度和溢出的组合:隐藏,这些单元格中的文本似乎是水平切片。我们的要求人不喜欢这个样子;但当然我们不能限制最终用户编辑XHTML。

Here is a JSFiddle example问题。

这个问题与以下内容不重复:

这个问题让我感到非常困惑 - 我希望SO社区可以来救我!

更新

最终,我怀疑使用HTML / JS / jQuery无法解决这个问题。实际上,你可以制作一个表(或一系列DIV),其顶部边距逐渐增加,这样就无法避免切割其中至少一个。

感谢所有人的回复。我将其作为一个答案,因为在我看来,这是一个特别简单/优雅的解决方法。

4 个答案:

答案 0 :(得分:7)

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

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

它不像简单地剪切文字那样难看。

答案 1 :(得分:0)

你的麻烦来自overflow:hidden;。这条线正在完成你告诉它要做的事情,即隐藏溢出。你可以使用overflow-y: auto或类似的东西吗?这与一个抓地力(如其文字区域的SO用途)一起应该可以帮助你。

答案 2 :(得分:0)

您可以将其设置为auto,然后在提交内容时检查是否存在滚动条,而不是使用overflow:hidden。见这个主题:

detect elements overflow using jquery

答案 3 :(得分:0)

尝试CSS3属性:text-overflow并将其设置为ellipsis,默认值为clip