如何使用省略号进行文本溢出工作，使用没有中断的长字符串

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;