A jak dobrze wiesz, obecnie w kodzie HTML dąży się do stosowania znaczników niosących ze sobą określone znaczenie. Dla przykładu ważny kawałek tekstu, możemy otoczyć znacznikami <strong>. To, że ten tekst będzie ważny jest zdefiniowane w specyfikacji HTML. Jaką treść ze sobą niesie każdy znacznik HTML możesz sprawdzić w specyfikacji HTML. Jednak co ze znacznikiem <br>? Niestety nie niesie ze sobą żadnego znaczenia semantycznego dlatego jest idealnym przykładem, aby zastosować inne rozwiązania wprowadzające nowy wiersz.
Poniżej przedstawiam trzy sposoby, które warto poznać.
Pierwszy sposób
Możesz wymusić przejście do nowego wiersza za pomocą content: “\A” wraz z white-space: pre;
Rozwiązanie jest bardzo przydatne, gdy nie trzeba określać koloru tła oraz marginesów wewnętrznych. W przeciwnym wypadku zostanie wyświetlony kawałek tła zastosowanego w span.
See the Pen new line version 1 by Tomasz Wikło (@tomasznetguru) on CodePen.0
Drugi sposób
Drugi sposób rozwiązuje problem związany z tłem i marginesem wewnętrznym. Polega na wyświetlaniu span jako element blokowy (a elementy blokowe w przeciwieństwie do inline wyświetlają się w nowym wierszu) i zastosowaniu atrybutu data- oraz właściwości content: attr. Tekst należy wpisać w atrybut data- a za pomocą właściwości content wstawiamy zawartość na stronę.
See the Pen new line version2 by Tomasz Wikło (@tomasznetguru) on CodePen.0
Trzeci sposób
Trzeci sposób, jest znacznie łatwiejszy w zastosowaniu niż wcześniejsze i nie ma efektu ubocznego po zastosowaniu tła i marginesów wewnętrznych. Polega na wymuszeniu układu tabelarycznego za pomocą display: table;
See the Pen new line version 3 by Tomasz Wikło (@tomasznetguru) on CodePen.0
Osobiście najbardziej polubiłem sposób trzeci, wystarczy dopisać jedną regułe CSS i gotowe. A Tobie które rozwiązanie przypadło do gustu?
Opublikowano 30 maja 2016 w kategorii css, poradnik.
