CSS text-align-last Property

The text-align-last property aligns the last line of a block of text.

Options include left, center, right, justify, and others.

Not all browsers support this property.

Example

#

The last line is centered with a text-align-last:center setting.

The most comprehensive primary source on Van Gogh is the correspondence between he and his younger brother, Theo. Their lifelong friendship, and most of what is known of Vincent's thoughts and theories of art, are recorded in the hundreds of letters they exchanged from 1872 until 1890. Theo van Gogh was an art dealer and provided his brother with financial and emotional support as well as access to influential people on the contemporary art scene.
<style>
  .text-align-last {
    max-width: 400px;
    padding: 15px;
    text-align: justify; /* For Edge */
    text-align-last: center;
    border: 2px solid lightblue;
  }
</style>

<div class="text-align-last">
  The most comprehensive primary source 
  on Van Gogh is the correspondence between 
  he and his younger brother, Theo. Their 
  lifelong friendship, and most of what is
  known of Vincent's thoughts and theories 
  of art, are recorded in the hundreds of 
  letters they exchanged from 1872 until 1890. 
  Theo van Gogh was an art dealer and provided 
  his brother with financial and emotional support
  as well as access to influential people on the
  contemporary art scene.
</div>

Syntax

text-align-last: auto | left | right | center | 
                 justify | start | end |
                 initial | inherit;

Values

#

Value Description
auto Default. The last line will be justified and left-aligned.
left Left align last line text
right Right align last line text
center Center align last line text
justify Justifies last line text
start Last line is aligned at the beginning of the line
end Last line is aligned at the end of the line
initial Sets the value to its default value
inherit Inherits the vale from its parent element.

More Examples

Click the buttons to see the different text-align values.

The most comprehensive primary source on Van Gogh is the correspondence between he and his younger brother, Theo. Their lifelong friendship, and most of what is known of Vincent's thoughts and theories of art, are recorded in the hundreds of letters they exchanged from 1872 until 1890. Theo van Gogh was an art dealer and provided his brother with financial and emotional support as well as access to influential people on the contemporary art scene.
<style>
  .text-align-last-example {
    max-width: 400px;
    padding: 15px;
    text-align: justify; /* For Edge */
    text-align-last: right;
    border: 2px solid lightsalmon;
  }
</style>

<div class="text-align-last-example">
  The most comprehensive primary source
  on Van Gogh is the correspondence between
  he and his younger brother, Theo. Their
  lifelong friendship, and most of what is
  known of Vincent's thoughts and theories
  of art, are recorded in the hundreds of
  letters they exchanged from 1872 until 1890.
  Theo van Gogh was an art dealer and provided
  his brother with financial and emotional support
  as well as access to influential people on the
  contemporary art scene.
</div>

Did you know?

Did you know?

Align <select> with text-align-last

By default, text in a <select> element is left aligned. In this example text-align-last has changed the text alignment.

Choose color
<style>
  .centered {
    text-align: center; /* For Edge */
    text-align-last: center;
    width: 200px;
  }
</style>

<div>
  Choose color
  <select class="centered">
    <option>Blue</option>
    <option>Green</option>
    <option>Red</option>
    <option>Yellow</option>
  </select>
</div>

Browser support

This table shows when text-align-last support started for each browser.

Chrome
47.0 Dec 2015
Firefox
49.0 Sep 2016
IE/Edge
5.5 Jul 2000
Opera
34.0 Dec 2015
Safari
Not supported

You may also like

Guides