chevron-left chevron-right

Piotr Nalepa Frontend, architektura i AI

[CSS] Łamanie długich tekstów za pomocą CSS

Ta wersja
blog.piotrnalepa.pl/2010/06/28/css-lamanie-dlugich-tekstow-za-pomoca-css
Opublikowano
Autor
, Staff Software Engineer
Kategoria
CSS
Uwagi
Napisz do mnie · Napisz na X

Ten wpis ma 16 lat. Od tego czasu przeglądarki i narzędzia mogły się zmienić, więc zanim użyjesz kodu, sprawdź go z aktualną dokumentacją.

W dzisiejszym bardzo krótkim artykule poruszę kwestię łamania długich ciągów znaków, takich jak na przykład linki do stron WWW, za pomocą arkuszy stylów CSS.

Na pewno wielokrotnie spotykałeś się z linkami o mniej więcej podobnej długości:
https://blog.piotrnalepa.pl/2010/05/11/css-rownomierne-rozmieszczenie-wielu-elementow-w-jednej-linii/
i zastanawiałeś się jak tak długi link można zmieścić na niewielkim obszarze tak, aby nie wychodził poza obszar?

Rozwiązanie jest proste, należy wykorzystać następujący atrybut w CSS:

Przykład 1CSS
white-space: pre-wrap;
Najlepiej go stosować do elementów blokowych takich jak:
  • pre
  • div
  • nagłówki - hx, gdzie x to kolejny numer
  • p

Udostępnij
Uwagi

O autorze

Staff Software Engineer

Piszę na tym blogu od 2009 roku, a strony i aplikacje webowe tworzę zawodowo od 14 lat. Obecnie w Bishop Fox prowadzę frontend platformy Cosmos, od samego początku projektu. Wcześniej pracowałem m.in. w OLX, KUDO, Auto1 i eZ Systems. Piszę tu o tym, czego nauczyłem się w praktyce: o JavaScripcie, TypeScripcie, Reakcie, CSS-ie i architekturze frontendu. Występowałem też jako prelegent na konferencjach w Polsce i Europie. Masz pytanie albo pomysł na wpis? Daj znać!