Autor publikacji
Virtual Patriot - Administrator

text-align-last

Data publikacji
Ostatnio edytowano

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

Za pomocą właściwości text-align-last możemy określić sposób wyrównania części 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

Informacje techniczne 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

tak (animacja schodkowa)

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

Wyjaśnienie

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:#7DCDE8;
      }
    </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

Wyjaśnienie

Za pomocą wartości start właściwości text-align-last możemy sprawić, że część tekstu interesującego nas elementu HTML zostanie wyrównana w obszarze zawartości elementu HTML w kierunku początkowej krawędzi liniowej elementu HTML.

Przykład

  text-align-last:start;
część tekstu tego elementu "div"
została wyrównana 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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      część tekstu tego elementu "div"<br>została wyrównana 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

Wyjaśnienie

Za pomocą wartości end właściwości text-align-last możemy sprawić, że część tekstu interesującego nas elementu HTML zostanie wyrównana w obszarze zawartości elementu HTML w kierunku końcowej krawędzi liniowej elementu HTML.

Przykład

  text-align-last:end;
część tekstu tego elementu "div"
została wyrównana 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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      część tekstu tego elementu "div"<br>została wyrównana 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

Wyjaśnienie

Za pomocą wartości left właściwości text-align-last możemy sprawić, że część tekstu interesującego nas elementu HTML zostanie wyrównana w obszarze zawartości elementu HTML w kierunku lewej krawędzi liniowej elementu HTML.

Przykład

  text-align-last:left;
część tekstu tego elementu "div"
została wyrównana 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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      część tekstu tego elementu "div"<br>została wyrównana 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

Wyjaśnienie

Za pomocą wartości center właściwości text-align-last możemy sprawić, że część tekstu interesującego nas elementu HTML zostanie wyśrodkowana w obszarze zawartości elementu HTML względem obu krawędzi liniowych elementu HTML.

Przykład

  text-align-last:center;
część tekstu tego elementu "div"
została wyśrodkowana 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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      część tekstu tego elementu "div"<br>została wyśrodkowana 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

Wyjaśnienie

Za pomocą wartości justify właściwości text-align-last możemy sprawić, że część tekstu interesującego nas elementu HTML zostanie wyrównana (wyjustowana) w obszarze zawartości elementu HTML w kierunku obu krawędzi liniowych elementu HTML.

Przykład

  text-align-last:justify;
część tekstu tego elementu "div"
została wyrównana 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:#7DCDE8;
      }
    </style>
  </head>

  <body>

    <div>
      część tekstu tego elementu "div"<br>została wyrównana 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>