text-align-last

  • Revision slug: CSS/text-align-last
  • Revision title: text-align-last
  • Revision id: 25222
  • Created:
  • Creator: Marcoos
  • Is current revision? No
  • Comment 19 words added, 4 words removed

Revision Content

{{ CSSRef() }}

Summary

The text-align-last CSS property describes how the last line of a block or a line right before a forced line break is aligned.

  • {{ Xref_cssinitial() }}: auto
  • Applies to: block level elements
  • {{ Xref_cssinherited() }}: yes
  • Media: {{ Xref_cssvisual() }}
  • {{ Xref_csscomputed() }}: as specified

Syntax

 text-align-last:  auto | start | end | left | right | center | justify | {{ Cssxref("inherit") }}

Values

auto
The affected line is aligned per the value of {{ cssxref("text-align") }}.
start
The same as left if direction is left-to-right and right if direction is right-to-left.
end
The same as right if direction is left-to-right and left if direction is right-to-left.
left
The inline contents are aligned to the left edge of the line box.
right
The inline contents are aligned to the right edge of the line box.
center
The inline contents are centered within the line box.
justify
The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.

Examples

div {
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
}

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }}
{{ WebkitBug("76173") }}
{{ CompatGeckoDesktop("12.0") }}{{ property_prefix('-moz') }} 8.0 {{ CompatUnknown() }}

{{ CompatNo() }}
{{ WebkitBug("76173") }}

Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support {{ CompatNo() }}
{{ WebkitBug("76173") }}
{{ CompatGeckoMobile("12.0") }}{{ property_prefix('-moz') }} 9.0 {{ CompatUnknown() }} {{ CompatNo() }}
{{ WebkitBug("76173") }}

Specifications

Specification Status Comment
CSS Text Module Level 3 {{ Spec2('CSS3 Text') }}  

See also

  • {{ cssxref("text-align") }}

Revision Source

<p>{{ CSSRef() }}</p>
<h3>Summary</h3>
<p>The <code>text-align-last</code> CSS property describes how the last line of a block or a line right before a forced line break is aligned.</p>
<ul> <li>{{ Xref_cssinitial() }}: <code>auto</code></li> <li>Applies to: block level elements</li> <li>{{ Xref_cssinherited() }}: yes</li> <li>Media: {{ Xref_cssvisual() }}</li> <li>{{ Xref_csscomputed() }}: as specified</li>
</ul>
<h3>Syntax</h3>
<pre class="eval"> text-align-last:  auto | start | end | left | right | center | justify | {{ Cssxref("inherit") }}</pre>
<h3>Values</h3>
<dl> <dt>auto</dt> <dd>The affected line is aligned per the value of {{ cssxref("text-align") }}.</dd> <dt>start</dt> <dd>The same as <code>left</code> if direction is left-to-right and <code>right</code> if direction is right-to-left.</dd> <dt>end</dt> <dd>The same as <code>right</code> if direction is left-to-right and <code>left</code> if direction is right-to-left.</dd> <dt>left</dt> <dd>The inline contents are aligned to the left edge of the line box.</dd> <dt>right</dt> <dd>The inline contents are aligned to the right edge of the line box.</dd> <dt>center</dt> <dd>The inline contents are centered within the line box.</dd> <dt>justify</dt> <dd>The text is justified. Text should line up their left and right edges to the left and right content edges of the paragraph.</dd>
</dl>
<h3>Examples</h3>
<pre>div {
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
}
</pre>
<h3>Browser compatibility</h3>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari (WebKit)</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatNo() }}<br> {{ WebkitBug("76173") }}</td> <td>{{ CompatGeckoDesktop("12.0") }}{{ property_prefix('-moz') }}</td> <td>8.0</td> <td>{{ CompatUnknown() }}</td> <td> <p>{{ CompatNo() }}<br> {{ WebkitBug("76173") }}</p> </td> </tr> </tbody> </table>
</div>
<div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Feature</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{ CompatNo() }}<br> {{ WebkitBug("76173") }}</td> <td>{{ CompatGeckoMobile("12.0") }}{{ property_prefix('-moz') }}</td> <td>9.0</td> <td>{{ CompatUnknown() }}</td> <td>{{ CompatNo() }}<br> {{ WebkitBug("76173") }}</td> </tr> </tbody> </table>
</div>
<h3>Specifications</h3>
<table class="standard-table"> <thead> <tr style="background-color: rgb(255, 204, 255);"> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td><a class="external" href="http://www.w3.org/TR/css3-text/#text-align-last">CSS Text Module Level 3</a></td> <td>{{ Spec2('CSS3 Text') }}</td> <td> </td> </tr> </tbody>
</table>
<h3>See also</h3>
<ul> <li>{{ cssxref("text-align") }}</li>
</ul>
Revert to this revision