Przejście do nowej linii (enter) w CSS

   Czasami projektując na przykład naszą stronę www musimy zrobić przejście do nowej linii. Oczywiście do tego służy znacznik w HTML jakim jest < br> / < /br>. Ale co jeśli chcemy, by przejście do nowej lini było uzależnione na przykład tylko przy danej rozdzielczości.. No i tu się zaczynają różne schodki i kombinacje. Lecz mało osób wie, że możemy taką operację wykonać przy pomocy CSS. Jak to dokonać ? Zobaczcie sami....

Sam sposób odpatrzyłem u Samuraj Programowania w serwisie YouTube.

   Posługując się tutaj przykładową stukturą HTML i kilkoma linijkami kodu ten efekt się nam uda. Lecz najpierw zacznijmy od samego HTML. U mnie w przykładnie będzie on wyglądał tak:

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < title>tytuł strony</title>
< /head>
< body>
       < p>WŁAŚCIWA TREŚĆ PIERWSZEJ LINIJKI POZOSTAŁA CZĘŚĆ TREŚĆ STRONY< /p>
< /body>
< /html>

Oczywiście z racji tego, że bloger nie ma funkcji wstawiania kodów - no chyba, że ja nie znam na to sposobu - w każdym nawiasie trójkątnym przed jego zawartością wstawiłem spację, którą należy zignorować.

W powyższym tekście ujętym w znaczniku < p> , żeby zrobić przejście do nowej (czyli tekst podzielić przy użyciu znaku enter na dwie linie) musimy dodać w tekście jeszcze znacznik < span>. Powinno to wyglądać tak:

kod:

< !DOCTYPE html>
< html lang="pl">
< head>
    < meta charset="utf-8">
    < title>tytuł strony</title>
< /head>
< body>
       < p>< span>WŁAŚCIWA TREŚĆ PIERWSZEJ LINIJKI< /span> POZOSTAŁA CZĘŚĆ TREŚĆ STRONY< /p>
< /body>
< /html>

W znaczniku < span> określamy co ma dokładnie znajdować się w naszej pierwszej linii. Natomiast to, co poza spamem to automatycznie jest to druga linia.

Gdy mamy już załatwiony kod HTML. Teraz czas na przejście do naszego arkusza CSS. W arkuszu tworzymy teraz regułę: p span a zawartość jej będzie stanowić kolejno content: '\A'; iwhite-space: pre;. Całość w css powinna tak wyglądać:

kod:

p san {
   content: '\A';
   white-space: pre;
}

Objaśniając kolejno content: '\A'; oznacz utworzenie znaku enter, lecz sam znak się nie utworzy, jeśli do reguły nie dodamy white-space: pre;. Trochę dziwna jest ta zasada i niekoniecznie zrozumiała, ale cóż tak musi być..

Oczywiście żeby nasz znak enter miał jakiś w ogóle sens, należy utworzyć regułę, kiedy mamy się wykonać (w obecnym kodzie będzie działała ona zawsze tak samo jak znacznik < br>). I dla przykładu, możemy stworzyć regułę, by znak naszego enteru w CSS obowiązywał tylko na stronie internetowej, kiedy jest wyświetlana ona na urządzeniu mobilnym w orientacji portrait, czyli pionowej. I będzie to wyglądało tak:

kod:

@media (orientation: portrait) {
p san{
content: '\A';
white-space: pre;
}

I to wszystko na dzisiaj ;)