的Android/WebKit的文本溢出:省略号不工作
问题描述:
我试图让下面的代码到androind 2.1手机(HTC的Sense UI)上工作:的Android/WebKit的文本溢出:省略号不工作
h1 {
font-size: 14px;
font-weight: bold;
color: #FFF;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
然而,文本溢出属性不似乎工作。有其他人有这个问题,或找到一种方法来解决它?
答
我看你没有定义宽度。如果元素被允许得到任意宽度,那么将不会有任何溢出>>>元素。溢出它父项的元素不会给你想要的效果。
答
在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;
}
答
看来,当你的“显示”设置为“-webkit-盒子”,恢复到“块”会做“省略号”是行不通的。 这可能有所帮助:https://bugzilla.mozilla.org/show_bug.cgi?id=672944#c0
如果overflow设置为隐藏并且它包含一个元素,通常情况下并不正确。我经常这样做,我得到省略号。然而,我注意到了Android上的一个问题,您会发现剪辑和省略号重叠的奇怪组合。不知道为什么。 – 2012-06-08 00:11:23