8.1 Właściwość text-overflow
Oblanie tekstu i zarządzanie jego wyświetlaniem to ważne aspekty web designu, szczególnie przy pracy z długimi liniami tekstu lub ograniczonymi co do rozmiaru kontenerami. Właściwości text-overflow, white-space i word-wrap (obecnie znane jako overflow-wrap) pozwalają kontrolować, jak tekst zachowuje się w takich sytuacjach.
Właściwość text-overflow zarządza tym, jak wyświetla się tekst, który wychodzi poza granice kontenera. Jest używana w połączeniu z właściwościami white-space i overflow do tworzenia efektu obcinania tekstu i dodawania wielokropka.
Wartości:
clip: obcina tekst, który wychodzi poza granice konteneraellipsis: dodaje wielokropek (...) na końcu obciętego tekstu
Przykład użycia:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
}
.clip {
text-overflow: clip;
}
.ellipsis {
text-overflow: ellipsis;
}
<body>
<div class="container clip">Ten tekst zostanie obcięty na granicy kontenera.</div>
<div class="container ellipsis">Ten tekst zostanie obcięty i zastąpiony wielokropkiem.</div>
</body>
8.2 Właściwość white-space
Właściwość white-space zarządza przetwarzaniem białych znaków i łamaniem tekstu. Pozwala określić, jak spacje, tabulacje i nowe linie są przetwarzane w tekście.
Wartości:
normal: spacje i zalamania wierszy są przetwarzane normalnie (domyślnie)nowrap: tekst jest wyświetlany w jednej linii, bez zalamańpre: spacje i zalamania wierszy są zachowane, jak w tagu HTML<pre>pre-wrap: spacje i zalamania wierszy są zachowane, ale tekst może być łamany na nową linię w razie potrzebypre-line: zalamania wierszy są zachowane, ale spacje są przetwarzane jak zwyklebreak-spaces: spacje i zalamania wierszy są zachowane, a długie spacje mogą powodować łamanie linii
Przykład użycia:
.normal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
<body>
<div class="normal">Ten tekst zostanie przeniesiony do następnej linii, jeśli zabraknie miejsca.</div>
<div class="nowrap">Ten tekst nie zostanie przeniesiony do następnej linii i będzie wyświetlany w jednej linii.</div>
<div class="pre">
Ten tekst zachowa
wszystkie spacje i zalamania wierszy.
</div>
<div class="pre-wrap">
Ten tekst zostanie przeniesiony do następnej linii, ale również zachowa
wszystkie spacje i zalamania wierszy.
</div>
</body>
8.3 Właściwość overflow-wrap
Właściwość overflow-wrap (wcześniej znana jako word-wrap) zarządza łamaniem słów, które wychodzą poza granice kontenera. Pozwala zapobiec przepełnieniu kontenera długimi słowami, które nie mogą być podzielone na części.
Wartości
normal: łamanie słów odbywa się zgodnie ze standardowymi zasadami łamaniabreak-word: łamanie słów odbywa się, nawet jeśli trzeba podzielić słowo na części
Przykład użycia:
.container {
width: 200px;
border: 1px solid #000;
}
.normal {
overflow-wrap: normal;
}
.break-word {
overflow-wrap: break-word;
}
<body>
<div class="container normal">Ten tekst zostanie przeniesiony do następnej linii, jeśli zabraknie miejsca.</div>
<div class="container break-word">TosłodługieNiełamaniepotrzebujerozbijaniajesliniebędziemiestrze.</div>
</body>
Wyjaśnienie kodu:
overflow-wrap: normal;: łamanie słów odbywa się według standardowych zasad, bez rozbijania słówoverflow-wrap: break-word;: długie słowa będą rozdzielane i przenoszone do następnej linii w razie potrzeby
8.4 Wspólne używanie właściwości
Właściwości text-overflow, white-space i word-wrap są często używane razem w celu osiągnięcia pożądanego efektu wyświetlania tekstu w ograniczonych wymiarowo kontenerach.
Przykład użycia:
.container {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: break-word;
border: 1px solid #000;
}
<body>
<div class="container">Ten tekst zostanie obcięty i zastąpiony wielokropkiem, jeśli zabraknie miejsca w kontenerze.</div>
</body>
Wyjaśnienie kodu:
white-space: nowrap;: tekst jest wyświetlany w jednej linii, bez łamaniaoverflow: hidden;: ukrywa tekst wychodzący poza granice konteneratext-overflow: ellipsis;: dodaje wielokropek na końcu obciętego tekstuoverflow-wrap: break-word;: łamanie długich słów, jeśli zabraknie miejsca
GO TO FULL VERSION