橢圓沒有出現在文本溢出

我有一個標題：橢圓沒有出現在文本溢出

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

我想，如果它超過h2高度截斷的多行文字：

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

我「M期待：

Lorem ipsum dolor 
dumbledore at...

什麼結果

Lorem ipsum dolor 
dumbledore at

爲什麼不是省略號顯示？

當我加white-space: nowrap;省略號顯示，但h2文本現在是一個單行，而不是佔據整個高度h2。

Lorem ipsum dolor...

來源

2012-10-01 Michelle

Quirksmode.org（必讀！）建議你還需要white-space: nowrap;。

來源

2012-10-01 07:53:43 GolezTrol

但截斷文本在一個行，而不是佔領的高度。 – Michelle

顯然，單線的高度是h2高度的一半以上。嘗試設置「行高」爲26px（或更小）。 – GolezTrol

你能提供一個小提琴嗎？我試着玩它，但我無法使它工作。 – Michelle

你可以用一些現代的CSS技巧去做看到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>

來源

2013-02-21 10:12:29 Plippie

橢圓沒有出現在文本溢出

回答

相關問題