All geek questions in one place

Overflow button text is cropped in safari

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 will copy the text at the border of the button.

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 make the text overflow. Does anyone know how to make this work. TIA

+5
source share
2 answers

So in the end I found a job.

If I wrap the text in the gap, and then set the range to position: the relative overflow text will display correctly without being trimmed.

Also pay attention to the above recommendation on the use of text overflow: the clip is incorrect, the text overflow does not affect it: "really".

+3
source

This is incorrect CSS for Safari:

  text-overflow: '';

Use this for cross-browser compatibility:

 text-overflow: clip;

See below for more details.

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

Also not sure for what purpose for overflow: visible; I would set it to hidden .

-2
source

Source: https://habr.com/ru/post/1261129/

More articles:


All Articles