Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki

Właściwości tekstu

Email Drukuj PDF

Tematy: Poziome wyrównanie tekstu | Pionowe wyrównanie tekstu | Wcięcie testu | Dekoracja tekstu | Przekształcanie tekstu | Odstępy między literami | Odstępy między wyrazami | Odstępy między liniami | Pusta przestrzeń

Tekst, a dokładniej bloki tekstu na naszej stronie mogą być formatowane przez kaskadowe arkusze stylów. Już pierwsza specyfikacja zawierała szeroki zestaw poleceń związanych z wyglądem bloków tekstu na stronie. Mamy możliwość określania:

  • wyrównania tekstu,

  • odstępu pomiędzy wyrazami i literami,

  • wcięcia tekstu,

  • dekoracji tekstu,

  • odstępu pomiędzy wierszami,

  • właściwości spacji w tekście.

Poziome wyrównanie tekstu

text-align

Dostępne wartości:

left | right | center | justify | inherit

Wartość domyślna:

wyrównanie do lewej strony

Przykład:

p {text-align:left;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Blok tekstu, podobnie jak to ma miejsce w dowolnym edytorze tekstu, może być wyrównany do strony lewej, prawej, do środka lub do prawej i lewej strony jednocześnie — opcja ta nosi nazwę justowania. Odpowiednie polecenia, które należy wpisać do arkusza, wyglądają następująco:

<p style="text-align:left">Ten akapit jest wyrównany do lewej strony.</p>

<p style="text-align:right">Ten akapit jest wyrównany do prawej strony.</p>

<p style="text-align:center">Ten akapit jest wyśrodkowany.</p>

<p style="text-align:justify">Ten akapit jest wyrównany do lewej i prawej strony.</p>

Poniżej znajduje się efekt działania powyższego kodu.

<<przykład>>

<div class="przyklad">

<h3>Przykład działania: text-align:left</h3>

<p style="text-align:left">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

 

<h3>Przykład działania: text-align:right</h3>

<p style="text-align:right">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

 

<h3>Przykład działania: text-align:center</h3>

<p style="text-align:center">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

 

<h3>Przykład działania: text-align:justify</h3>

<p style="text-align:justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. </p>

</div>

<</przykład>>

Polecenie text-align służy do wyrównania elementów blokowych, takich jak: <P>, <DIV> czy <BLOCKQUOTE>, <PRE> oraz elementy od <H1> do <H6> i <HR>. Do wyrównania całej tabeli lub obrazka wykorzystujemy inne polecenia.

Pionowe wyrównanie tekstu

vertical-align

Dostępne wartości:

baseline | sub | super | bottom | text-bottom | middle | top | text-top | wartość liczbowa | wartość procentowa | inherit

Wartość domyślna:

wyrównanie do dołu

Przykład:

p {vertical-align: super;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Za pomocą kaskadowych arkuszy stylów możemy pozycjonować elementy w pionie. Innymi słowy, można np. spróbować wyśrodkować w pionie dowolny tekst na stronie WWW. Taki rodzaj formatowania umożliwia polecenie vertical-align.

<p>Pozycjonowanie pionowe<span style="vertical-align:baseline;"> - vertical-align:baseline</span></p>

<p>Pozycjonowanie pionowe<span style="vertical-align:sub;"> - vertical-align:sub</span></p>

<p>Pozycjonowanie pionowe<span style="vertical-align:super;"> - vertical-align:super</span></p>

<p>Pozycjonowanie pionowe<span style="vertical-align:bottom;"> - vertical-align:bottom</span></p>

<p>Pozycjonowanie pionowe<span style="vertical-align:text-bottom;"> - vertical-align:text-bottom</span></p>

<p>Pozycjonowanie pionowe<span style="vertical-align:middle;"> - vertical-align:middle</span></p>

<p>Pozycjonowanie pionowe<span style="vertical-align:top;"> - vertical-align:top</span></p>   

<p>Pozycjonowanie pionowe<span style="vertical-align:text-top;"> - vertical-align:text-top</span></p>

Poniżej zamieściłem prosty przykład działania pozycjonowania pionowego.

<<przykład>>

<div class="przyklad" style="font-size:25pt;">

<p>Pozycjonowanie pionowe<span style="vertical-align:baseline; font-size:10pt; color:red;"> - vertical-align:baseline</span></p>

 

<p>Pozycjonowanie pionowe<span style="vertical-align:sub; font-size:10pt; color:red;"> - vertical-align:sub</span></p>

 

<p>Pozycjonowanie pionowe<span style="vertical-align:super; font-size:10pt; color:red;"> - vertical-align:super</span></p>

 

<p>Pozycjonowanie pionowe<span style="vertical-align:bottom; font-size:10pt; color:red;"> - vertical-align:bottom</span></p>

 

<p>Pozycjonowanie pionowe<span style="vertical-align:text-bottom; font-size:10pt; color:red;"> - vertical-align:text-bottom</span></p>

 

<p>Pozycjonowanie pionowe<span style="vertical-align:middle; font-size:10pt; color:red;"> - vertical-align:middle</span></p>  

 

<p>Pozycjonowanie pionowe<span style="vertical-align:top; font-size:10pt; color:red;"> - vertical-align:top</span></p>

<p>Pozycjonowanie pionowe<span style="vertical-align:text-top; font-size:10pt; color:red;"> - vertical-align:text-top</span></p>       

</div>

<</przykład>>

Pionowe pozycjonowanie musi być zastosowane wewnątrz innego elementu i tylko wtedy działa poprawnie. Jeżeli w kodzie strony zostanie umieszczony jeden akapit i nic więcej, następnie wpiszemy styl pozycjonujący wspomniany element na środku okna w pionie, to taka konstrukcja — niestety — nie zadziała. Natomiast jeżeli akapit będzie znajdował się wewnątrz tabeli zajmującej całą wysokość okna, to tekst znajdzie się na środku. Przyjrzyjmy się poniższemu przykładowi.

<table border="1" width="300" height="300">

<tr>

        <td>

        <p style="vertical-align:middle;">Przykładowy tekst.</p>

        </td>

</tr>

</table>

<<przykład>>

<div class="przyklad">

<table border="1" width="300" height="300">

<tr>

        <td>

        <p style="text-align:center;vertical-align:middle;">Przykładowy tekst.</p>

        </td>

</tr>

</table>

</div>

<</przykład>>

Wcięcie tekstu

text-indent

Dostępne wartości:

 wartość liczbowa | wartość procentowa | inherit

Wartość domyślna:

0

Przykład:

p {text-indent:3pt;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Kolejną operacją na tekście, którą możemy przeprowadzić za pomocą kaskadowych arkuszy stylów, jest jego wcięcie. Mam tutaj na myśli wcięcie pierwszej linii bloku tekstu, jak to możemy spotkać w niektórych książkach czy artykułach. Dzięki takiemu formatowaniu dokument wygląda znacznie bardziej interesująco i profesjonalnie.

<p style="text-indent:1cm;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. 

</p>

<<przykład>>

<div class="przyklad">

<p style="text-indent:1cm;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. 

</p>

</div>

<</przykład>>

Specyfikacja CSS dopuszcza możliwość definiowania wcięcia dla tekstu o wartości ujemnej.

P

{

text-indent:-1cm;

}

<<przykład>>

<div class="przyklad" style="margin-left:2cm;">

<p style="text-indent:-1cm;">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus convallis malesuada. Sed eu mattis dolor. Donec in lacinia diam. Nulla felis risus, ultricies nec placerat vel, venenatis in purus. Sed sem nisl, scelerisque non accumsan a, dapibus ac lacus. Vivamus eu imperdiet ligula. Duis porttitor lacus et dui feugiat rhoncus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam posuere lacus et augue suscipit dignissim. Pellentesque sollicitudin dolor at massa sollicitudin non vulputate odio congue. Aenean eu justo sit amet augue accumsan aliquam. Nam scelerisque sodales odio. Vivamus ut mattis sapien. Sed rhoncus nisi nec arcu facilisis rhoncus. 

</p>

</div>

<</przykład>>

Pamiętaj o tym, że definicja ujemnej wartości wcięcia tekstu w dokumencie o domyślnych marginesach spowoduje we wszystkich przeglądarkach obcięcie wystającego fragmentu pierwszej linii. Będzie to spowodowane tym, że tekst nie zmieści się w oknie przeglądarki. Rozwiązaniem tego problemu może być określenie marginesów dla tworzonego dokumentu. Opis odpowiednich poleceń związanych z marginesami znajduje się w dalszej części kursu.

Dekoracja tekstu

text-decoration

Dostępne wartości:

none | underline | overline | line-through | blink | inherit

Wartość domyślna:

none

Przykład:

p {text-decoration:underline;}

Dziedziczenie:

Nie

Obsługa:

Pełna obsługa: Opera, Mozilla Firefox,
Częściowa obsługa: Internet Explorer, Chrome i Safari (nie działa blink)

Kaskadowe arkusze stylów pozwalają dowolnie dekorować tekst. Specyfikacja przypisała to zadanie do polecenia text-decoration i określa kilka sposobów dekoracji. Dopuszczalne metody dekoracji tekstu to podkreślenie, nadkreślenie, przekreślenie oraz miganie, które nie działa w przeglądarkach MS Internet Explorer.

<h1 style="text-decoration:underline;">Podkreślony nagłówek</h1>

<h1 style="text-decoration:overline;">Nadkreślony nagłówek</h1>

<h1 style="text-decoration:line-through;">Przekreślony nagłówek</h1>

<h1 style="text-decoration:blink;">Migający nagłówek</h1>

<<przykład>>

<div class="przyklad">

<h1 style="text-decoration:underline;">Podkreślony nagłówek</h1>

<h1 style="text-decoration:overline;">Nadkreślony nagłówek</h1>

<h1 style="text-decoration:line-through;">Przekreślony nagłówek</h1>

<h1 style="text-decoration:blink;">Migający nagłówek</h1>

</div>

<</przykład>>

Dekoracja tekstu bardzo często bywa wykorzystywana do usuwania podkreśleń z odsyłaczy, np.

A

{

text-decoration:none;

}

A:hover

{

text-decoration:underline;

color:red;  

}

<<przykład>>

<html>

   <head>

     <style type="text/css">

        A

        {

        text-decoration:none;

        }

        A:hover

        {

        text-decoration:underline;

        color:red;  

        }           

          </style>

    </head>

    <body>

        <a href="http://danowski.pl">Bartosz Danowski</a>

    </body>

</html>

<</przykład>>

Przekształcanie tekstu

text-transform

Dostępne wartości:

capitalize | uppercase | lowercase | none | inherit

Wartość domyślna:

none

Przykład:

p {text-transform: uppercase;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Podczas składania stron WWW od czasu do czasu bywa tak, że wpiszemy tekst, po czym chcemy go wyróżnić, np. przez zamianę wszystkich małych liter na duże. W przypadku popularnych edytorów tekstu, takich jak MS Word, niezbędne narzędzie jest wbudowane w sam program, dzięki czemu raz wprowadzonego tekstu nie musimy przepisywać, by go zmienić.

Twórcy stron w swoim przyborniku mają kaskadowe arkusze stylów, które pozwalają nie tylko na zmianę wielkości liter, ale też na uzyskanie kapitalików.

<p style="text-transform:none;">Przykładowy tekst bez transformacji.</p>

<p style="text-transform:lowercase;">Przykładowy tekst poddany transformacji.</p>

<p style="text-transform:uppercase;">Przykładowy tekst poddany transformacji.</p>

<p style="text-transform:capitalize;">Przykładowy tekst poddany transformacji.</p>

<<przykład>>

<div class="przyklad" style="margin-left:2cm;color:red;">

<h3 style="margin-left:-2cm;color:black;">Przykład działania: text-transform:none</h3>

<p style="text-transform:none;">Przykładowy tekst bez transformacji.</p>

<h3 style="margin-left:-2cm;color:black;">Przykład działania: text-transform:lowercase</h3>

<p style="text-transform:lowercase;">Przykładowy tekst poddany transformacji.</p>

<h3 style="margin-left:-2cm;color:black;">Przykład działania: text-transform:uppercase</h3>

<p style="text-transform:uppercase;">Przykładowy tekst poddany transformacji.</p>

<h3 style="margin-left:-2cm;color:black;">Przykład działania: text-transform:capitalize</h3>

<p style="text-transform:capitalize;">Przykładowy tekst poddany transformacji.</p>

</div>

<</przykład>>

Odstępy pomiędzy literami

letter-spacing

Dostępne wartości:

normal | długość | inherit

Wartość domyślna:

normal

Przykład:

p{letter-spacing:3pt;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Kolejnym ciekawym rozwiązaniem oferowanym przez kaskadowe arkusze stylów jest możliwość sterowania odstępami pomiędzy literami, z których składa się słowo. Do określania odstępów pomiędzy literami służy polecenie letter-spacing.

<p style="letter-spacing:3pt;">Przykładowy tekst z większymi odstępami pomiędzy literami.</p>

<<przykład>>

<div class="przyklad">

<p style="letter-spacing:3pt;">Przykładowy tekst z większymi odstępami pomiędzy literami.</p>

</div>

<</przykład>>

Odstępy pomiędzy literami mogą przybrać wartości ujemne.

<p style="letter-spacing:-3pt;">Przykładowy tekst z większymi odstępami pomiędzy literami.</p>

<<przykład>>

<div class="przyklad">

<p style="letter-spacing:-1pt;">Przykładowy tekst z większymi odstępami pomiędzy literami.</p>

</div>

<</przykład>>

Do określania odstępów pomiędzy literami możemy używać dowolnych jednostek, które zostały omówione we wstępie do kursu, dlatego też nic nie stoi na przeszkodzie, by utworzyć definicje stylów widoczne poniżej.

P

{

letter-spacing:1cm;

}

DIV

{

letter-spacing:10px;

}

Regulacja odstępów pomiędzy literami powinna być przeprowadzana z głową, gdyż zbyt duża wartość może spowodować bałagan na stronie. Również sam tekst na tym ucierpi i stanie się nieczytelny, gdy odstęp pomiędzy literami zbliży się do odstępów pomiędzy poszczególnymi wyrazami.

Specyfikacja kaskadowych arkuszy stylów pozwala nam w dowolnym momencie na wyłączenie dziedziczonego stylu odpowiadającego za regulację odstępów.

H1

{

letter-spacing:normal;

}

Odstępy pomiędzy wyrazami

word-spacing

Dostępne wartości:

normal | długość | inherit

Wartość domyślna:

normal

Przykład:

p{word-spacing:3pt;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Wiemy już, że kaskadowe arkusze stylów pozwalają na regulację odstępów pomiędzy literami, a teraz zobaczymy, w jaki sposób można regulować odstępy pomiędzy wyrazami wchodzącymi w skład bloku.

<p style="word-spacing:3pt;">Przykładowy tekst z większymi odstępami pomiędzy wyrazami.</p>

<<przykład>>

<div class="przyklad">

<p style="word-spacing:3pt;">Przykładowy tekst z większymi odstępami pomiędzy wyrazami.</p>

</div>

<</przykład>>

Odstępy pomiędzy wyrazami mogą przybrać wartości ujemne.

<p style="word-spacing:-3pt;">Przykładowy tekst z mniejszymi odstępami pomiędzy wyrazami.</p>

<<przykład>>

<div class="przyklad">

<p style="word-spacing:-3pt;">Przykładowy tekst z większymi odstępami pomiędzy wyrazami.</p>

</div>

<</przykład>>

Do określania odstępów pomiędzy wyrazami możemy używać dowolnych jednostek, które zostały omówione we wstępie do kursu, dlatego też nic nie stoi na przeszkodzie, by utworzyć definicje stylów widoczne poniżej.

P

{

word-spacing:1cm;

}

DIV

{

word-spacing:10px;

}

Regulacja odstępów pomiędzy wyrazami powinna być przeprowadzana z głową, gdyż zbyt duża wartość może spowodować bałagan na stronie. Również sam tekst na tym ucierpi i stanie się nieczytelny, gdy odstęp pomiędzy wyrazami zbliży się do odstępów pomiędzy poszczególnymi literami.

Specyfikacja kaskadowych arkuszy stylów pozwala nam na wyłączenie w dowolnym momencie dziedziczonego stylu odpowiadającego za regulację odstępów.

H1

{

word-spacing:normal;

}

Odstęp między liniami

line-height

Dostępne wartości:

normal | wielokrotność wysokości czcionki | procent wysokości czcionki | inherit

Wartość domyślna:

normal

Przykład:

p{line-height:100%;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Kaskadowe arkusze stylów pozwalają na regulację odstępu pomiędzy poszczególnymi wierszami tekstu wchodzącymi w skład bloku. Dzięki tej przydatnej funkcji możemy „rozluźnić” publikowany tekst na stronie, co spowoduje, iż będzie on zajmował więcej miejsca i stanie się bardziej przejrzysty.

<p style="line-height:200%;">Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami.</p>

<<przykład>>

<div class="przyklad">

<p style="line-height:200%;width:300px;">Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami.</p>

</div>

<</przykład>>

Do określania szerokości odstępów pomiędzy wierszami można używać jednostek procentowych, liczbowych oraz długości. Jeżeli zdecydujemy się na wielkości procentowe, należy pamiętać o tym, że są one obliczane względem wielkości czcionki. Jeżeli czcionka ma 14 punktów i ustawimy odstęp 200%, to w praktyce wyniesie on 28 punktów.

Odstęp pomiędzy wierszami jest liczony w następujący sposób. Zdefiniowana wartość odstępu jest dzielona na pół i dodawana nad linią i pod linią. Jeżeli określimy wysokość przerwy pomiędzy liniami na jeden centymetr, to w praktyce nad linią zostanie dodane pół centymetra i tyle samo pod nią. Oczywiście przerwa będzie wynosiła nadal jeden centymetr, gdyż w bloku tekstu odstęp pod linią będzie się sumował z odstępem nad linią znajdującą się poniżej.

Podczas określania szerokości przerwy pomiędzy wierszami nie można używać wartości ujemnych, gdyż taka definicja nie działa we wszystkich przeglądarkach. Dodatkowo występują jeszcze inne problemy, gdy zdefiniujemy nieduże wartości przerwy, np. 0,1. Dokładniej mówiąc, chodzi o to, że tekst nachodzi na siebie i staje się nieczytelny.

<<przykład>>

<div class="przyklad">

<p style="line-height:0.1px;width:300px;">Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami. Przykładowy tekst z większymi odstępami pomiędzy wierszami.</p>

</div>

<</przykład>>

Pusta przestrzeń

white-space

Dostępne wartości:

normal | pre | nowrap | pre-wrap | pre-line | inherit

Wartość domyślna:

normal

Przykład:

p{white-space:nowrap;}

Dziedziczenie:

Tak

Obsługa:

Opera, Mozilla Firefox, MS Internet Explorer, Chrome, Safari

Z formatowaniem spacji wstawianych do dokumentu związana jest bardzo ciekawa i przydatna opcja. Pamiętamy, iż język XHTML/HTML ignorował dodatkowe spacje — wyświetlał zawsze tylko jedną. Wymuszenie spacji w języku XHTML/HTML polegało na umieszczeniu twardej spacji — &nbsp;. Rozwiązanie to nie należało do najwygodniejszych, ale czasami z konieczności było stosowane. Innym rozwiązaniem było zamknięcie bloku tekstu w „archaicznym” znaczniku <PRE></PRE>, który wymuszał na przeglądarce, by pokazała tekst dokładnie tak, jak go wprowadziliśmy do dokumentu.

Kaskadowe arkusze stylów wprowadzają bardzo wygodne rozwiązanie pozwalające bezproblemowo manipulować spacją.

Wartość normal — przeglądarka automatycznie pomija dodatkowe spacje. Działa w każdej przeglądarce.

<p style="white-space:normal;">Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa.</p>

Wartość pre — przeglądarka automatycznie uznaje i pokazuje wszystkie dodatkowe spacje. Działa w każdej nowej przeglądarce, ale w przeszłości starsze wersje MS Internet Explorer nie obsługiwały tego stylu.

<p style="white-space:pre;">Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa.</p>

Wartość nowrap — przeglądarka blokuje automatyczne łamanie wiesza aż do chwili, gdy napotka znacznik <br />. Działa w każdej przeglądarce.

<p style="white-space:nowrap;">Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.<br /> Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. </p>

Wartość pre-wrap — przeglądarka zachowuje wszystkie dodatkowe spacje, a łamanie wiersza następuje tylko w sytuacji, gdy jest to potrzebne. Styl ten działa w każdej nowej przeglądarce, ale w przeszłości takie formatowanie obsługiwała jedynie Opera.

<p style="white-space:pre-wrap;">Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa.</p>

Przeglądarka ignoruje dodatkowe spacje. Dodatkowo tekst jest łamany w sposób automatyczny w zależności od potrzeby i w miejscach oznaczonych za pomocą znacznika <br />.

<p style="white-space:pre-line;">Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa.</p>

<<przykład>>

<div class="przyklad">

<h3>Przykład działania white-space:normal</h3>

<p style="white-space:normal;">Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa.</p>

<h3>Przykład działania white-space:pre</h3>

<p style="white-space:pre ;">Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa.</p>

<h3>Przykład działania white-space:nowrap</h3>

<p style="white-space:nowrap;">Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa. Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.<br>Przykładowy tekst z dodatkowymi spacjami wstawionymi pomiędzy słowa.</p>

<h3>Przykład działania white-space:pre-wrap</h3>

<p style="white-space:pre-wrap;">Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa.</p>

<h3>Przykład działania white-space:pre-line</h3>

<p style="white-space:pre-line;">Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa. Przykładowy tekst z    dodatkowymi spacjami  wstawionymi       pomiędzy słowa.</p>

</div>

<</przykład>>

 

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V

Nowości Helionu

Statystyki

Użytkowników : 766
Artykułów : 513
Zakładki : 28
Odsłon : 15226297