Ostatnio edytowany:

text-align-last

Autor: Virtual Patriot

Opis właściwości text-align-last

Za pomocą właściwości text-align-last możemy określić sposób wyrównania tekstu interesującego nas elementu HTML. Mowa tu o tekście występującym w ostatnim wierszu elementu HTML lub o tekście występującym w wierszu elementu HTML zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii.

Informacje dodatkowe

za pomocą właściwości white-space możemy zmienić sposób traktowania przez przeglądarkę internetową białych znaków występujących w tekście elementu HTML

element br tworzy zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii

Dodatkowe techniczne informacje o właściwości text-align-last

przeznaczenie

element HTML tworzący blok treści

pozycja

dowolna

dziedziczenie

tak

wartość initial

auto

wyjątki initial

brak

animowanie

nie (animacja nieciągła)

Interpretacja właściwości text-align-last

Firefox

tak

Google Chrome

tak

Safari

nie

Opera

tak

Internet Explorer

tak

Nie interpretuje wartości start oraz end.

Edge

tak

Zobacz więcej informacji o interpretacji właściwości .

Opis wartości właściwości text-align-last

auto

Opis

Wartość auto jest domyślną wartością właściwości text-align-last.

Wartość auto właściwości text-align-last elementu HTML wskazuje na wartość, jaką posiada właściwość text-align elementu HTML.

Gdy wartością właściwości text-align elementu HTML jest wartość justify, wtedy wartość "auto" wskazuje na wartość start.

Przykład

  text-align-last:auto;
do tego elementu "div"
została dodana właściwość "text-align" wraz z wartością "center", dzięki czemu wartością domyślną właściwości "text-align-last" tego elementu "div" jest również wartość "center", a co za tym idzie cały tekst tego elementu "div" został wyśrodkowany w obszarze zawartości tego elementu "div" względem początkowej oraz końcowej krawędzi liniowej tego elementu "div"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align:center;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      do tego elementu "div"<br>została dodana właściwość "text-align" wraz z wartością "center", dzięki czemu wartością domyślną właściwości "text-align-last" tego elementu "div" jest również wartość "center", a co za tym idzie cały tekst tego elementu "div" został wyśrodkowany w obszarze zawartości tego elementu "div" względem początkowej oraz końcowej krawędzi liniowej tego elementu "div"
    </div>

  </body>
</html>

start

Opis

Za pomocą wartości start właściwości text-align-last możemy sprawić, że tekst interesującego nas elementu HTML (występujący w ostatnim wierszu elementu HTML lub występujący w wierszu elementu HTML zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) zostanie wyrównany w obszarze zawartości elementu HTML w kierunku początkowej krawędzi liniowej elementu HTML.

Przykład

  text-align-last:start;
tekst tego elementu "div"
(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyrównany w obszarze zawartości tego elementu "div" w kierunku początkowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "start"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align-last:start;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div"<br>(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyrównany w obszarze zawartości tego elementu "div" w kierunku początkowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "start"
    </div>

  </body>
</html>

end

Opis

Za pomocą wartości end właściwości text-align-last możemy sprawić, że tekst interesującego nas elementu HTML (występujący w ostatnim wierszu elementu HTML lub występujący w wierszu elementu HTML zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) zostanie wyrównany w obszarze zawartości elementu HTML w kierunku końcowej krawędzi liniowej elementu HTML.

Przykład

  text-align-last:end;
tekst tego elementu "div"
(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyrównany w obszarze zawartości tego elementu "div" w kierunku końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "end"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align-last:end;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div"<br>(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyrównany w obszarze zawartości tego elementu "div" w kierunku końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "end"
    </div>

  </body>
</html>

left

Opis

Za pomocą wartości left właściwości text-align-last możemy sprawić, że tekst interesującego nas elementu HTML (występujący w ostatnim wierszu elementu HTML lub występujący w wierszu elementu HTML zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) zostanie wyrównany w obszarze zawartości elementu HTML w kierunku lewej krawędzi liniowej elementu HTML.

Przykład

  text-align-last:left;
tekst tego elementu "div"
(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyrównany w obszarze zawartości tego elementu "div" w kierunku lewej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "left"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align-last:left;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div"<br>(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyrównany w obszarze zawartości tego elementu "div" w kierunku lewej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "left"
    </div>

  </body>
</html>

center

Opis

Za pomocą wartości center właściwości text-align-last możemy sprawić, że tekst interesującego nas elementu HTML (występujący w ostatnim wierszu elementu HTML lub występujący w wierszu elementu HTML zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) zostanie wyśrodkowany w obszarze zawartości elementu HTML względem obu krawędzi liniowych elementu HTML.

Przykład

  text-align-last:center;
tekst tego elementu "div"
(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyśrodkowany w obszarze zawartości tego elementu "div" względem początkowej oraz końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "center"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align-last:center;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div"<br>(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyśrodkowany w obszarze zawartości tego elementu "div" względem początkowej oraz końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "center"
    </div>

  </body>
</html>

justify

Opis

Za pomocą wartości justify właściwości text-align-last możemy sprawić, że tekst interesującego nas elementu HTML (występujący w ostatnim wierszu elementu HTML lub występujący w wierszu elementu HTML zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) zostanie wyrównany (wyjustowany) w obszarze zawartości elementu HTML w kierunku obu krawędzi liniowych elementu HTML.

Przykład

  text-align-last:justify;
tekst tego elementu "div"
(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyrównany w obszarze zawartości tego elementu "div" w kierunku początkowej oraz końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "justify"

Kod źródłowy przykładu

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Darmowy Kurs CSS</title>

    <style>
      html {
        font-size:16px;
        font-family:Helvetica, sans-serif;
      }

      div {
        text-align-last:justify;
        font-size:1.3em;
        background-color:#CBFFFF;
      }
    </style>
  </head>

  <body>

    <div>
      tekst tego elementu "div"<br>(występujący w ostatnim wierszu tego elementu "div" lub występujący w wierszu tego elementu "div" zawierającym jakikolwiek zauważalny przez przeglądarkę internetową biały znak przejścia do nowej linii) został wyrównany w obszarze zawartości tego elementu "div" w kierunku początkowej oraz końcowej krawędzi liniowej tego elementu "div", ponieważ do tego elementu "div" została dodana właściwość "text-align-last" wraz z wartością "justify"
    </div>

  </body>
</html>