html - 如何使带有省略号的文本溢出与没有中断的长字符串一起工作

Question

我设置了一个网页，如下所示:http://alistapart.com/article/holygrail(可以在此处找到示例:http://alistapart.com/d/holygrail/example_4.html)

我的问题(这听起来可能有点做作，如果这让您感到困扰，让我们把它当作一个有趣的 CSS 练习)是如果您去掉所有空格和任何其他允许字符串中断的字符，文本就会溢出或者隐藏在右栏后面:

理想的解决方案是在出现这种情况时放置一个省略号，以便用户知道隐藏了文本。 (请注意，我不想在字母之间强制断开，因为该段落的其余部分具有正常大小的字符串，应该在空格或标点符号处断开。)

我似乎无法让 text-overflow 在任何地方工作。我能做的最好的事情似乎就是应用 overflow: hidden 但这是一个非常不理想的解决方案。

谁能告诉我(希望只使用 CSS。我对用 JavaScript 进行文本计算不感兴趣)如何为这个特定问题添加省略号？

Answer 1

试试这个 CSS

text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;