html - テキストオーバーフローに楕円が表示されない

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

いくつかの最新の css トリックでそれを行うことができますjsfidle の例を参照してください

body{padding: 4em;}
h3{border:2px solid red;padding:.5em;}

h3 {
display: block; /* Fallback for non-webkit */
display: -webkit-box;
max-width: 400px;
height: calc(26px*1.4*4); /* Fallback for non-webkit */
margin: 0 auto;
font-size: 26px;
line-height: 1.4;
-webkit-line-clamp:4;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}

<h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. </h3>

Answer 2

Quirksmode.org (必読!) も必要だと示唆していますwhite-space: nowrap;。