android/webkit text-overflow: ellipsis not working

Question

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;
    text-overflow: ellipsis;
    overflow: hidden;   
}

however, the text-overflow property does not seem to work. has anybody else had this problem, or found a way to work around it?

score 5 · Answer 1 · answered Oct 05 '12 at 13:57

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;
}

score 2 · Answer 2 · edited May 29 '12 at 00:36

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.

edited May 29 '12 at 00:36

alex

479,566
201
878
984

answered Apr 21 '11 at 14:36

martijnve

993
2
9
23

That's not true in general if overflow is set to hidden and it has a containing element. I regularly do this and I get ellipsis. I have however noticed a problem on Android where you get a weird combination of clipped and ellipsis overlapping. Not sure why. – Chris Nicola Jun 08 '12 at 00:11

Ehara He · Answer 3 · 2014-07-02T02:27:59.790

1

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

edited Jul 02 '14 at 02:27

answered Jul 02 '14 at 02:19

Ehara He

11
3

android/webkit text-overflow: ellipsis not working

3 Answers3

Linked