设置DIV高度，以便文本不被水平切割或切片

是否有任何JS/CSS/jQuery魔术我可以确定div中内容的最后一个可见位是否被切断，并略微增加/减少DIV高度，以防止文字切断？设置DIV高度，以便文本不被水平切割或切片

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

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

Here is a JSFiddle example的问题。

这个问题是不是重复：

“Stopping cut off text in variable height div...”为这个问题涉及到“的webkit行钳”，这是不相关的我的情况。（并且在任何情况下，该问题从未得到回答）
“Cut text by height, no truncate”因为该问题是关于包含纯文本的DIV;我的DIV包含XHTML。你会在JSFiddle中注意到我已经使用em测量来确定DIV高度了。

这个问题让我完全困惑 - 我希望SO社区能够帮助我！

UPDATE：

最终，我怀疑这不能用HTML/JS/jQuery的解决。事实上，你可以制作一张桌面（或一系列DIV），并逐渐增加顶部边距，这样就无法避免至少切掉其中一个。

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

来源

2012-03-19 mikemanne

你真的必须使用'高度：3.5em;在容器上'？如果你删除它并让浏览器定义div高度怎么办？ – bfavaretto 2012-03-19 19:35:49

@bfavaretto - 不幸的不是。如问题所述，DIV的全部内容可能比我们在查看列表中的项目时想要看到的大得多。换句话说，我们必须限制DIV的高度。 – mikemanne 2012-03-19 19:44:59

所以你只想改变高度，如果文本比块“稍”大一些，那是正确的吗？ – 2012-03-19 19:59:19

这是不是你要找的解决方案，但它可能是一个不错的设计解决方法。我把一个白色渐变div的底部，所以它创建不大不小的“视觉省略号”

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

它不像文本时简单地切断一样丑陋。

来源

2012-03-19 20:13:53

感谢您的快速响应。你是对的，它没有具体解决我的问题，但它是一个优雅（并且快速实施）的解决方法。我会试着将这种方法“卖”给我的需求人。谢谢！ – mikemanne 2012-03-19 20:18:23

告诉我们它是否工作:-) – 2012-03-20 05:42:22

这个工作，但背景必须是白色的。 – 2015-10-06 13:08:17

您的问题来自overflow:hidden;。这条线正在做你说的要做的事，即隐藏溢出。你可以使用overflow-y: auto或类似的东西？与一个尴尬（如SO在其文本区域使用）一起，应该帮助你。

来源

2012-03-19 19:40:19

感谢您的快速响应！不幸的是，我可能会遇到overflow：hidden，因为客户端的UI策略排除了任何滚动项目（整个页面的浏览器滚动条除外）。 – mikemanne 2012-03-19 19:47:12

而不是溢出：隐藏，您可以将其设置为自动，然后检查提交内容时是否存在滚动条。看到这个线程：

detect elements overflow using jquery

来源

2012-03-19 19:46:41

感谢您的回复。然而，问题不在于隐藏的内容 - 这是已知的和预期的。问题是给定的文本行有时会部分隐藏（水平切片）。也许我错过了一些东西，但我不认为简单地比较scrollHeight和clientHeight会帮助我解决这个问题。 – mikemanne 2012-03-19 20:12:23

顺便说一句：scrollHeight-to-clientHeight比较工作正常，即使溢出：隐藏。它不依赖于通过溢出实际显示滚动条：auto。只是一个FYI，如果你想在溢出时使用你的引用技术：hidden div。 :) – mikemanne 2012-03-19 20:13:47

哦酷 - 谢谢你的头。我想如果文本被切断，溢出被设置为自动，滚动条将被检测到，然后可以通过jQuery调整高度。 – 2012-03-19 21:21:49

尝试CSS3属性：text-overflow并将其设置为ellipsis，默认值是clip

来源

2012-03-20 16:18:01 FoxKllD

感谢您的回应。我以前使用过省略号 - 但我认为它不会阻止文本行出现“切片”。相反，它只是一些视觉提示，某些文本已被截断。另外，当我上次使用省略号时，它仅在IE中受支持。 – mikemanne 2012-03-22 16:08:22

快速提示：最新版本的Firefox（11.0）似乎支持省略号CSS指令。 – mikemanne 2012-03-27 13:39:56

设置DIV高度，以便文本不被水平切割或切片

回答

相关问题