Trzy sposoby na nowy wiersz

Trzy sposoby na nowy wiersz

Podczas swojej nauki tworzenia stron nie raz używałeś znacznika br. Służy on do wstawienia nowego wiersza. Czyli mówiąc krótko i zwięźle - jest to element prezentacyjny, formatujący wygląd naszej strony.

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?

Kamil Laskowski

Sympatyk systemów otwartoźródłowych. Człowiek z zapałem, doskonale wiedzący, czego chce od życia. W wolnych chwilach uwielbia tańczyć oraz grać na gitarze.