2016-12-12 11 views
5

Mam prosty przycisk i chcę, aby tekst przepełnił przycisk. Działa to dobrze w obecnych przeglądarkach, z wyjątkiem Safari (ios i osx), które przycinają tekst na granicy przycisku.Przepełniony tekst przycisku jest przycinany w safari

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>

nie mogę dowiedzieć się, jak uzyskać tekst do przepełnienia. Czy ktoś wie, jak to zrobić? TIA

Odpowiedz

-2

To nieważne CSS dla Safari:

text-overflow: ''; 

Służy do zgodności z różnymi przeglądarkami:

text-overflow: clip; 

Zobacz to na szczegóły:

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

także nie wiem, jaki jest cel dla overflow: visible; Ustawiłabym go na hidden.

+0

Nie robi żadnej różnicy, nadal jest przycinany na granicy guzików. – blackmamba

+0

"Również nie wiadomo, jaki jest cel przepełnienia: widoczny; Ustawiłem to na ukryty "- OP * chce * tekst, aby przepełnić przycisk. –

+0

W rzeczywistości strona MDN, do której się powołujesz, stwierdza, że ​​w przypadku przepełnienia tekstu: _Klipkowanie odbywa się na granicy ramki; do obcięcia z limitem znaków można użyć pustego niestandardowego ciągu znaków ('') ._ Uważam, że mój pierwotny wpis był prawidłowy. Nie ma to żadnego wpływu tutaj, tekst zostaje cokolwiek przycięty. – blackmamba

3

W końcu znalazłem pracę.

Jeśli zawijam tekst w przęśle, a następnie ustaw rozpiętość w pozycji: względny tekst przepełniony będzie wyświetlany poprawnie bez obcięcia.

Należy również zapoznać się z powyższym zaleceniem, aby korzystać z przepełnienia tekstu: klip jest nieprawidłowy, nie ma wpływu na to i przepełnienie tekstu: "" jest poprawny.

Powiązane problemy