Question

我有一个简单的按钮标记，我特别希望文本溢出按钮。这在当前浏览器中工作正常，但Safari（ios和osx）除外，它在按钮边界处剪切文本。

＆＃13;

button,
.button {
    width: 100px;
    overflow: visible;
    white-space: nowrap;
    text-overflow: 'clip';
    text-align: left;
    -webkit-appearance: none;
    background: none;
    border: none
}

＆＃13;

<button>Very long text Very long text Very long text This Clips In Safari</button>
<div class='button'>Very long text Very long text Very long text This Overflows</div>

＆＃13;

我无法弄清楚如何让文字溢出。有谁知道如何使这项工作。 TIA

Answer 1

所以最终我找到了一个解决方法。

如果我在一个范围中包装文本然后将范围设置为位置：相对，溢出的文本将正确显示而不会被剪裁。

另请注意上面的建议使用文本溢出：剪辑错误，对此没有影响和文本溢出：''有效。

Answer 2

这是Safari的无效CSS：

    text-overflow: '';

将此用于跨浏览器兼容性：

text-overflow: clip;

详情请见：

https://developer.mozilla.org/en/docs/Web/CSS/text-overflow

还不确定overflow: visible;的目的是什么？我将其设置为hidden。

在Safari中正在剪切溢出的按钮文本

2 个答案: