Tekst wieloliniowy

W ostatnim czasie dostałem ciekawy projekt do pocięcia. Pojawił się w nim dość często spotykany motyw z tekstem, który jest pisany w kilku liniach, gdzie każda z nich ma osobne tło.

Na rozwiązanie takiego wyzwania wymyśliłem kilka sposobów - żaden idealny, ot po prostu inne. Kilka z nich przedstawionych zostało na stronie https://css-tricks.com/multi-line-padded-text/. Większość opiera się o podobną technikę polegającą na wrzuceniu tekstu w dodatkowy element inline, który następnie stylujemy.


<h2 class="title">
    <span>Lorem ipsum dolor sit.</span>
</h2>

.title {
    font-size: 20px;
    line-height: 35px;
    color: #fff;
    font-family: sans-serif;
}

.title span {
    display: inline;
    background: #000;
    line-height: inherit;
    font-size: inherit;
    padding: 5px;
    box-shadow: 0.5em 0 0 #000, -0.5em 0 0 #000;
    box-decoration-break: clone;
}

Niestety nie jest to idealne rozwiązanie. Display inline nie pozwala nam w łatwy sposób dodawać odstępów między liniami. Idealnie było by, gdyby taki odstęp można było wyliczyć za pomocą jakiegoś wzoru typu calc(1.5em + 2px). Ale niestety nie można, bo w sumie nie do końca wiadomo ile line-height wynosi (1). Pozostaje więc ustawianie na oko - co nie zawsze jest najwygodniejsze - zwłaszcza gdy musisz kilka razy zmieniać wielkość tekstu, bo tego wymaga layout. W poniższym demo zobaczysz, że CSS Lock też nie rozwiązuje sytuacji.

Inny pomysł, na który wpadłem to wrzucenie każdego słowa w osobny span (za pomocą JS), a następnie za pomocą flexa wyrównywanie ich do lewej strony.

Wyświetlanie inline-block daje możliwość odsunięcia linii za pomocą marginesu (albo gap dla flexa). Z minusów mamy tutaj mniejszą kontrole nad lewą i prawą krawędzią linii, ponieważ do końca nie wiadomo który span jest pierwszym i ostatnim w linii.

https://codepen.io/kartofelek007/pen/NWpKdWj

Trzeci pomysł to podział tekstu na oddzielne linie, które obejmuje dodatkowymi elementami. Jego realizację możesz zobaczyć pod adresem: https://github.com/kartofelek007/multiline-text

Kolisty wykres

Jakiś czas temu na grupie facebookowej mój były kursant zadał pytanie jak zrobić okrągły wykres, po którym podąża jakaś kropka. Dość ciekawe zadanie, na które od razu wpadło mi kilka pomysłów. A czy uda się je zrealizować? Czas rzucić rękawice i stanąć do walki.

Czytaj więcej

Tworzenie layoutu 2

Wracamy do cięcia layoutu. Tym razem będzie o wiele prościej.

Czytaj więcej
Poprzednia strona Następna strona