Ostatnia aktualizacja 22 stycznia, 2024
Podczas wdrażania projektów stron internetowych, web developer dostosowuje kontrolę nad sposobem wyświetlania treści. Jest to szczególnie ważne z uwagi na występującą różnorodność urządzeń. Aby zawartość stron dostosowywała się dynamicznie do rozmiarów ekranu, wykorzystuje się właściwość CSS o nazwie text-overflow z wartością ellipsis. Pozwala ona zachować estetykę i czytelność strony bez względu na ilość tekstu. Wartość ellipsis dla tej właściwości umożliwia adekwatne skracanie tekstu, gdy przekracza on dostępną przestrzeń. Ta technika jest szczególnie użyteczna w interfejsach użytkownika, w których przestrzeń jest ograniczona, a treść musi być prezentowana w sposób zrozumiały i estetyczny. Sprawdź, jak stosować ją w praktyce.
Czym jest text-overflow: ellipsis?
text-overflow: ellipsis to właściwość CSS, która kontroluje sposób ucinania tekstu, gdy nie mieści się w przydzielonym do niego boxie. “Ellipsis” odnosi się do trzech kropek (…) używanych do wskazania, że tekst został skrócony. Tę metodę stosuje się regularnie w interfejsach, w których istotne jest zachowanie spójności i przejrzystości. Spotkamy ją m.in. w menu nawigacyjnym, kartach produktów w sklepach internetowych czy wiadomościach w aplikacjach mobilnych.
Jak stosować text-overflow: ellipsis?
Aby poprawnie użyć text-overflow: ellipsis, należy najpierw upewnić się, że element zawierający tekst ma ustawioną szerokość (lub maksymalną szerokość) oraz ustawienie overflow na wartość hidden. Dopiero potem można zastosować text-overflow: ellipsis. Oto przykład:
.ellipsis-text {
width: 250px; /* Ustalamy szerokość pojemnika */
overflow: hidden; /* Ukrywamy zawartość przekraczającą pojemnik */
white-space: nowrap; /* Zapobiegamy zawijaniu tekstu do nowej linii */
text-overflow: ellipsis; /* Dodajemy ellipsis na końcu tekstu */
}Praktyczne zastosowanie
Właściwości text-overflow: ellipsis używa się w wielu miejscach. Można ją stosować dla tytułów, opisów produktów, długich nazw plików itp. Oto przykład HTML z wykorzystaniem powyższej klasy CSS:
<div class="ellipsis-text">
Ten bardzo długi tekst zostanie skrócony do szerokości 250 pikseli...
</div>W podanym fragmencie kodu HTML mamy do czynienia z elementem <div>, którego używa się do grupowania treści w celu zastosowania do niej stylów CSS lub skryptów JavaScript. W tym przypadku klasa CSS o nazwie ellipsis-text została przypisana do tego <div>. Najważniejszą cechą tej klasy jest to, że zastosowano do niej styl text-overflow: ellipsis, co powoduje, że tekst, który nie mieści się w określonej szerokości boxa, zostanie skrócony i zakończony trzema kropkami (…), znanymi jako “ellipsis”.
Aby to zadziałało, kilka innych właściwości CSS musi zweirać w ramach tej klasy następujące parametry:
width: 250px;– określa szerokość boxa. W tym przypadku jest to 250 pikseli. Jest to maksymalna szerokość tekstu przed jego skróceniem.overflow: hidden;– zapobiega wyświetlaniu się tekstu poza granicami pojemnika. Jeśli tekst jest dłuższy niż szerokość boxa, nadmiarowy tekst będzie “ukryty”.white-space: nowrap;– uniemożliwia automatyczne przenoszenie tekstu do nowej linii w obrębie pojemnika. Zapewnia to, że cały tekst pozostaje w jednej linii.text-overflow: ellipsis;– właśnie ta właściwość sprawia, że nadmiarowy tekst, który nie mieści się w pojemniku, jest zastępowany trzema kropkami, sygnalizując użytkownikowi, że tekst został skrócony.
Gdy widzimy taki kod na stronie internetowej, tekst wewnątrz <div> – “Ten bardzo długi tekst zostanie skrócony do szerokości 250 pikseli…” – będzie wyświetlany do momentu, gdy osiągnie szerokość 250 pikseli. Wszystko, co przekracza tę szerokość, zostanie zastąpione ellipsis, czyli trzema kropkami. To bardzo użyteczne w przypadkach, w których mamy do czynienia z ograniczoną przestrzenią i chcemy uniknąć przewijania tekstu lub jego przesadnego skracania, m.in. w kartach produktów, menu czy tytułach artykułów.
Dziękujemy, że przeczytałaś/eś nasz artykuł. Obserwuj EnterTheCode.pl w Wiadomościach Google, aby być na bieżąco.
Czytaj także:
CSS padding. Zadbaj o estetykę strony
CSS white-space, czyli kontroluj wyświetlanie białych znaków
