android/webkit text-overflow: ellipsis không làm việc

Question

tôi đang cố gắng để có được đoạn mã sau để làm việc trên một androind 2.1 điện thoại (HTC Sense UI):

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

Tuy nhiên, tài sản text-overflow không dường như hoạt động. có ai khác đã có vấn đề này, hoặc tìm thấy một cách để làm việc xung quanh nó?

Answer 1

Tôi thấy bạn không có chiều rộng được xác định. Nếu phần tử được phép mở rộng tùy ý, sẽ không bao giờ có bất kỳ tràn nào>trong vòng> phần tử. Các yếu tố tràn cha mẹ của nó không cho bạn hiệu quả mong muốn.

Answer 2

trên Android 2.2 và 4, tôi sử dụng chiều cao dòng lớn hơn kích thước phông chữ (luôn là em) với loại hiển thị "-webkit-box" và hướng dọc.

Dưới đây là một ví dụ:

.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 3

Dường như 'ellipsis' không hoạt động khi 'display' của bạn được thiết lập để '-webkit-box', thiết lập lại để 'khối' sẽ làm. Điều này có thể giúp: https://bugzilla.mozilla.org/show_bug.cgi?id=672944#c0