使用overflow:hidden逐个隐藏单词

Question

有没有一种方法可以使用CSS逐个隐藏单词（而不是逐个字母），当元素的宽度不足以显示其文本内容时？

例如，对于以下代码，当浏览器窗口变得太窄以至于无法显示整个句子时，我希望它显示Lorem ipsum dolor sit...而不是Lorem ipsum dolor sit ame...

HTML：

<div>Lorem ipsum dolor sit amet</div>

CSS：

div { overflow:hidden; text-overflow:ellipsis; white-space-nowrap; }

我不需要支持旧浏览器。

- Vaughan

---

我已经做了一些研究，似乎不可能。:( 不过，如果可能的话，我很想知道！ - sheng

这将适用于Javascript。 - markasoftware

@Markasoftware，我想到了一种用Javascript的方法来实现它，只是想知道是否有可能采用CSS的方式。 - Vaughan

可能是省略词：http://www.css3.info/preview/text-overflow/ - markasoftware

“ellipsis-word”本来是完美的选择，但目前似乎还没有在任何浏览器中实现。 - Vaughan

Answer 1

您可以将容器的高度强制设置为与单行文本相同，并使用 overflow: hidden 隐藏超出该行的文本。

/* hide one word at a time */

p.short {
    height: 18px;
    overflow: hidden; }

/* display an ellipsis "..." */

p.ellipsis { 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

http://jsfiddle.net/Wexcode/fbhxL/

- Wex

---

谢谢Wex。这种方法不能保留我示例中的“...”，但它确实回答了我的问题。如果没有人能提供保留省略号的解决方案，我将接受这个答案。 - Vaughan

是的，很遗憾你不能链接伪选择器，否则你可能可以做类似于 p::first-line::after 的事情。 - Wex