省略号没有出现在文本溢出上

Question

我有一个标题:

<h2><a href="#">Lorem ipsum dolor dumbledore at hogwarts</a></h2>

我试图在多行上截断文本,如果超过以下高度h2:

h2 {
  width: 200px;
  height: 52px;
  overflow: hidden;
  text-overflow: ellipsis;
}

我期待的是:

Lorem ipsum dolor 
dumbledore at...

结果如何

Lorem ipsum dolor
dumbledore at

为什么不显示省略号？

当我添加white-space: nowrap;省略号显示但文本h2现在是一个单行而不是占据整个高度h2.

Lorem ipsum dolor...

Answer 1

Quirksmode.org（必读！）建议您还需要white-space: nowrap;.