使用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; }

（我不需要支持旧浏览器）

Answer 1

您可以随时强制您的容器与单行文本具有相同的高度，并使用overflow: hidden隐藏该行下方的任何文字。

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

p.short {
    height: 18px;
    overflow: hidden; }
p.ellipsis { 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }