Question

我正在使用Roboto webfont开发一个移动网络应用程序，并且在对文本进行椭圆化时我有一种非常奇怪的行为。

当我在桌面浏览器上浏览文本时，这就是我得到的：

enter image description here

但在我的Galaxy S2上，省略号与行的垂直中间对齐

enter image description here

问题出现在许多手机上，但并非全部都出现。

如果我删除webfont导入，省略号在手机和桌面上都可以（但当然我不使用Roboto）。

这是一个非常简单的代码示例，可以重现问题：

<html>
<head>
    <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
    <style>
        .ellipsed-text{
            overflow: hidden;
            white-space: nowrap;
            text-overflow:ellipsis;
            display: block;
            width:100px;
            vertical-align: baseline;
            font-family: 'Roboto';
        }
    </style>
</head>
<body>
    <span class="ellipsed-text">test test test test test test test</span>
</body>
</html>

这是我的CSS吗？这是一个webkit错误吗？ Google的Roboto webfont中是否有错误？

Roboto Web字体的CSS省略号与Android上的垂直中间对齐

0 个答案: