text-overflow：省略移动时忽略右边距的省略号

Question

我有一个div样式，用省略号截断居中文本，每边都有一些填充。它在使用桌面浏览器时有效，但在iPad上，文本似乎忽略了正确的填充并且不正确地居中。

我将它用于造型：

div {
    text-overflow: ellipsis;
    width: 120px;
    padding: 0 38px;
    overflow: hidden;
    white-space: nowrap;
    border: 1px solid black;
    text-align: center;
}

这里可以看到一个例子。在iPad上查看问题。 http://jsfiddle.net/35Lyk9yp/

我认为这可能是移动浏览器的一些错误？它不适用于iOS Safari或Chrome，但在Windows Safari，Chrome和Firefox上都可以。它有一个简单的解决方法吗？

编辑：

我找到了一种解决方法，使用内部div和我用来做省略号的内容，然后使用外部div来设置填充。如果有一种方法可以使用一个元素，请告诉我。

Answer 1

为了让您的代码正常工作，您需要拥有CSS overflow，width和display。

您可能错过了display。