截断标签：找出文本何时溢出 2 行 400 像素长的标签答案

【问题标题】：Truncate a label: find out when text overflows a 2-row 400px-long label截断标签：找出文本何时溢出 2 行 400 像素长的标签
【发布时间】：2010-09-24 08:06:26
【问题描述】：

我有一个（固定宽度和高度）标签，它总结了一长串选择标准，并且规范说，如果标签内容超过 2 行 @ 400px，则应修剪，应添加椭圆，其余的应该在鼠标悬停时显示在悬停的 div 中，就像工具提示一样。我想要一些关于选择修剪点的最佳方法的建议。

到目前为止，我只有两个想法，而且我对其中任何一个都不太满意：

我根据内容长度推测截断；我发现这是特别不明智的，因为 (1) 我使用的是比例字体，并且 (2) 这是一个两行文本，环绕很容易把它弄得一团糟。
我使用第二个隐藏标签，并在 javascript 中获取宽度。稍微好一点，但不同意环绕，因为隐藏标签只有 1 行。

无论我最终实现什么解决方案，我可能都必须严格使用 JavaScript 来执行此操作。

【问题讨论】：

我不久前听说过这个hack，不知道在哪里：获取文本，按单词分割，然后将每个单词放在标签内自己的元素中；然后依次检查每个单词，看它是否与前一个单词在同一行（offsetHeight？）。如果没有，您已经找到了换行符。

标签： javascript html text label truncate

【解决方案1】：

是否可以隐藏标签然后将其宽度设置为400px？然后你可以在隐藏标签上测量高度，并继续删除字母，直到它只剩下两行，这会给你保留在原始标签中的字母数量。但是当标签被隐藏时，样式可能会消失？我不确定。

【讨论】：

是的，这就是我最终所做的。样式不会消失，但是（我正在使用 jQuery，顺便说一句）如果标签没有明确具有“高度：自动”，.height() 函数往往会返回一个常量值；在某处指定。这是非常时髦的行为，没有它会返回 18 ，有它会返回 17*rows 。等我写完后，我会发布完整的解决方案。