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

Question

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

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

<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>

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

Answer 1

所以最终我找到了一个解决方案.

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

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