android/webkit 文本溢出：省略号不起作用答案

【问题标题】：android/webkit text-overflow: ellipsis not workingandroid/webkit 文本溢出：省略号不起作用
【发布时间】：2010-10-27 18:06:09
【问题描述】：

我正在尝试让以下代码在 android 2.1 手机（HTC Sense UI）上工作：

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

但是，text-overflow 属性似乎不起作用。有没有其他人遇到过这个问题，或者找到了解决方法？

【问题讨论】：

标签： android css webkit

【解决方案1】：

在 Android 2.2 和 4 上，我使用的行高大于字体大小（始终为 em），显示类型为“-webkit-box”和垂直方向。

这是一个例子：

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

【讨论】：

【解决方案2】：

我看到你没有定义宽度。如果允许元素任意变宽，则永远不会有任何溢出 >within> 元素。溢出其父元素的元素不会给你想要的效果。

【讨论】：

如果溢出设置为隐藏并且它有一个包含元素，这通常不是真的。我经常这样做，我得到省略号。然而，我注意到 Android 上的一个问题，你会得到一个奇怪的剪辑和省略号重叠组合。不知道为什么。

【解决方案3】：

当您的 'display' 设置为 '-webkit-box' 时，'ellipsis' 似乎不起作用，重置为 'block' 即可。这可能会有所帮助：https://bugzilla.mozilla.org/show_bug.cgi?id=672944#c0

【讨论】：