滚动时的文本溢出省略号未在 Chrome 和 IE 中显示溢出的内容

Question

我试图弄清楚当文本溢出是省略号并且溢出是滚动或自动时是否有办法显示溢出的内容。

这是一个示例链接，您可以在其中看到向右滚动时未显示的溢出内容。但它适用于 FireFox。

提前致谢。

Answer 1

我想出了一种在 webkit 浏览器中通过滚动来模拟文本溢出的方法。

\n

它需要 JavaScript。为了方便起见，我的解释使用了 jQuery，但我还包含了一个普通的 JavaScript 解决方案。

\n

该p元素需要位于容器内，如下所示：

\n

<div class="ellipsis">\n  <p>\n    Test paragraph with <code>ellipsis</code>...\n  </p>\n</div>\n

\n

使用这些样式，替换300px您喜欢的宽度：

\n

.ellipsis {\n  width: 300px;\n  overflow-x: scroll;\n}\n\n.ellipsis p {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n

\n

这会导致滚动条出现在容器上而不是p元素上。

\n

首先，我们确定 的宽度p并像这样存储它：

\n

$(\'.ellipsis p\').each(function() {\n  $(this)\n    .data(\'width\', $(this).css(\'display\',\'inline-block\').width()+10)\n    .css(\'display\',\'\');\n});\n

\n

如果没有display:inline-block，则其p宽度与其容器 \xe2\x80\x93 相同，在本例中为 300px。 inline-block允许p扩展到全宽。我们将此宽度加 10 以考虑滚动条上的右箭头。然后我们恢复p默认display。

\n

我们希望p始终具有该宽度，以便滚动条将移动 的整个范围p。但是，设置p为该宽度可以消除省略号。

\n

解决方案？将p'swidth设置为容器的宽度，并将p's设置为容器的全宽度与其宽度paddingRight之间的差值。p

\n

如果容器没有滚动，这很有效。要考虑滚动位置，只需scrollLeft在计算中包含：

\n

$(\'.ellipsis\').scroll(function() {\n  $(this).find(\'p\').css({\n    paddingRight: $(this).find(\'p\').data(\'width\') - $(this).scrollLeft() - $(this).width(),\n    width: $(this).scrollLeft() + $(this).width()\n  });\n});\n

\n

jQuery 解决方案：

\n

\r\n

\r\n

<div class="ellipsis">\n  <p>\n    Test paragraph with <code>ellipsis</code>...\n  </p>\n</div>\n

\r\n

.ellipsis {\n  width: 300px;\n  overflow-x: scroll;\n}\n\n.ellipsis p {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n}\n

\r\n

$(\'.ellipsis p\').each(function() {\n  $(this)\n    .data(\'width\', $(this).css(\'display\',\'inline-block\').width()+10)\n    .css(\'display\',\'\');\n});\n

\r\n

\r\n

\r\n

\n

普通 JavaScript 解决方案：

\n

\r\n

\r\n

$(\'.ellipsis\').scroll(function() {\n  $(this).find(\'p\').css({\n    paddingRight: $(this).find(\'p\').data(\'width\') - $(this).scrollLeft() - $(this).width(),\n    width: $(this).scrollLeft() + $(this).width()\n  });\n});\n

\r\n

$(\'.ellipsis p\').each(function() {\n  $(this)\n    .data(\'width\', $(this).css(\'display\',\'inline-block\').width()+10)\n    .css(\'display\',\'\');\n});\n\n$(\'.ellipsis\').scroll(function() {\n  $(this).find(\'p\').css({\n    paddingRight: $(this).find(\'p\').data(\'width\') - $(this).scrollLeft() - $(this).width(),\n    width: $(this).scrollLeft() + $(this).width()\n  });\n});\n\n$(\'.ellipsis\').scroll();

\r\n

#E1 {\n  width: 200px;\n}\n\n#E2 {\n  width: 400px;\n}\n\n.ellipsis {\n  overflow-x: scroll;\n  border: 1px solid #ddd;\n  margin: 2em 0em;\n}\n\n.ellipsis p {\n  text-overflow: ellipsis;\n  overflow: hidden;\n  white-space: nowrap;\n  margin: 0;\n}

\r\n

\r\n

\r\n\n