elip không xuất hiện trên văn bản tràn

Question

Tôi có một danh hiệu:

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

Tôi đang cố gắng cắt ngắn văn bản trên nhiều dòng nếu nó vượt quá chiều cao của h2:

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

Những gì tôi 'm expecting:

Lorem ipsum dolor 
dumbledore at... 

Kết quả là gì

Lorem ipsum dolor 
dumbledore at 

Tại sao dấu ba chấm không hiển thị?

Khi tôi thêm white-space: nowrap; dấu ba chấm hiển thị nhưng văn bản của h2 hiện là một lớp lót thay vì chiếm toàn bộ chiều cao h2.

Lorem ipsum dolor... 

Answer 1

Quirksmode.org (phải đọc!) Gợi ý bạn cũng cần white-space: nowrap;.

Answer 2

Bạn có thể làm điều đó với một số thủ đoạn gian trá css hiện đại thấy jsfidle example

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>