安卓/ WebKit的文本溢出：省略号不工作 [英] android/webkit text-overflow: ellipsis not working

问题描述

我想获得以下code工作在一个androind 2.1手机（HTC Sense界面）：

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

然而，文本overflow属性似乎不工作。有其他人有这个问题，或者找到一种方法来解决它？

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

推荐答案

在Android 2.2和4，我用一条线高度比字体大小（总是EM），以显示类型-webkit-箱和垂直更大方向。

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.

下面是一个例子：

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

这篇关于安卓/ WebKit的文本溢出：省略号不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！