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
dziedziczenie
  • tak
wartość initial
wyjątki initial
  • brak
animowanie
  • nie

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 wspomnianego elementu HTML.

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

Przykład

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 względem lewej oraz prawej krawędzi obszaru zawartości 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:#AFF;
      }
    </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 względem lewej oraz prawej krawędzi obszaru zawartości 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 do tej krawędzi obszaru zawartości elementu HTML, od której rozpoczęło się pisanie wspomnianego tekstu.

Przykład

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 do lewej krawędzi obszaru zawartości 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;
        -moz-text-align-last:start;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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 do lewej krawędzi obszaru zawartości 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 do tej krawędzi obszaru zawartości elementu HTML, która jest krawędzią przeciwną do krawędzi, od której rozpoczęło się pisanie wspomnianego tekstu.

Przykład

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 do prawej krawędzi obszaru zawartości 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;
        -moz-text-align-last:end;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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 do prawej krawędzi obszaru zawartości 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 do tej krawędzi obszaru zawartości elementu HTML, która znajduje się po lewej stronie względem posiadanego przez element HTML kierunku pisania tekstu.

Przykład

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 do lewej krawędzi obszaru zawartości 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;
        -moz-text-align-last:left;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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 do lewej krawędzi obszaru zawartości 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 względem tych krawędzi obszaru zawartości elementu HTML, które występują po obu stronach posiadanego przez element HTML kierunku pisania tekstu.

Przykład

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 względem lewej oraz prawej krawędzi obszaru zawartości 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;
        -moz-text-align-last:center;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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 względem lewej oraz prawej krawędzi obszaru zawartości 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) do tych krawędzi obszaru zawartości elementu HTML, które występują po obu stronach posiadanego przez element HTML kierunku pisania tekstu.

Przykład

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 do lewej oraz prawej krawędzi obszaru zawartości 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;
        -moz-text-align-last:justify;
        font-size:1.3em;
        background-color:#AFF;
      }
    </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 do lewej oraz prawej krawędzi obszaru zawartości 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>