text-overflow
Decyduje, jak oznaczyć tekst ucięty na końcu linii, na przykład wielokropkiem.
- Wartość domyślna
clip- Dziedziczona
- Nie
- Animowalna
- nie
- Dotyczy
- kontenery blokowe
- JavaScript
element.style.textOverflow = "ellipsis"
Przykład
#.title {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}<ul class="stage" style="margin: 0; padding-left: 20px; width: 240px;">
<li class="title" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Moduł 1: Wprowadzenie do HTML i struktury dokumentu</li>
<li class="title" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">Moduł 2: Formularze, pola i walidacja danych</li>
</ul>Definicja i zastosowanie
#Właściwość text-overflow określa, co pokazać w miejscu, gdzie tekst przestaje się mieścić. Wartość ellipsis dodaje wielokropek, sygnalizując, że tekst jest dłuższy.
Sama nie wystarczy. Tekst musi być w jednej linii (white-space: nowrap) i przycięty (overflow: hidden), a element musi mieć ograniczoną szerokość. Te trzy właściwości zawsze występują razem.
Do obcinania tekstu po kilku liniach służy inna technika: -webkit-line-clamp z display: -webkit-box, obsługiwana dziś we wszystkich głównych przeglądarkach.
Składnia
#text-overflow: clip | ellipsis;Wartości
#Wartości w praktyce
#clip
.demo { text-overflow: clip; }ellipsis
.demo { text-overflow: ellipsis; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Pełny tekst uciętego tytułu udostępnij na przykład w atrybucie
titlealbo na stronie szczegółów. - W elemencie flex obcinanie zadziała dopiero po dodaniu
min-width: 0.
Powiązane hasła
#- white-spaceDecyduje, jak traktować spacje, entery i zawijanie linii w tekście.
- overflowDecyduje, co zrobić z treścią, która nie mieści się w elemencie.
- overflow-wrapŁamie długie wyrazy tylko wtedy, gdy inaczej wystawałyby poza kontener.
- min-widthUstala minimalną szerokość, poniżej której element się nie zwęży.
Widzisz błąd albo brakuje przykładu? Napisz do nas.