Overflowing button text is being clipped in safari

Question

I have a simple button tag and I specifically want the text to overflow the button. This works fine in current browsers with the exception of Safari (ios and osx) which clips the text at the button boundary.

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>

I can't figure out how to get the text to overflow. Does anyone know how to make this work. TIA

Answer 1

So eventually I found a work around.

If I wrap the text in a span and then set the span to position:relative the overflowing text will display correctly without being clipped.

Also note the recommendation above to use text-overflow:clip is wrong, has no impact on this and text-overflow:'' is valid.