Android / webkit text overflow: ellipse not working

Question

I am trying to get the following code to work with androind 2.1 phone (HTC Sense user interface):

h1 { font-size: 14px; font-weight: bold; color: #FFF; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } 

however, the text-overflow property does not work. does anyone else have this problem or have found a way around it?

Answer 1

on Android 2.2 and 4, I use a line height exceeding the font size (always em) with the display type "-webkit-box" and vertical orientation.

Here is an example:

 .myClass{ display : -webkit-box; -webkit-box-orient : vertical; text-overflow : ellipsis; -webkit-line-clamp : 3; overflow : hidden; font-size : 0.9em; line-height : 1.2em; } 

Answer 2

I see that you do not have a certain width. If the element is allowed to be arbitrarily wide, there will never be any overflow> inside the element. An element overflowing with a parent will not give you the desired effect.

Answer 3

It seems that the “ellipsis” does not work when your “display” is set to “-webkit-box”, reset is “block”. This may help: https://bugzilla.mozilla.org/show_bug.cgi?id=672944#c0