Android/webkit Text-overflow: Ellipsis Not Working

i am trying to get the following code to work on an androind 2.1 phone (HTC Sense UI): h1 { font-size: 14px; font-weight: bold; color: #FFF; white-space: nowrap;

Solution 1:

on Android 2.2 and 4, I use a line height greater than the font size (always em) with a display type "-webkit-box" and a 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;
}

Solution 2:

I see you have no width defined. If the element is allowed to get arbitrarily wide there is never going to be any overflow >within> the element. The element overflowing its parent wil not give you the desired effect.

Solution 3:

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