text-align-last

  • Revision slug: CSS/text-align-last
  • Revision title: text-align-last
  • Revision id: 300149
  • Created:
  • Creator: ethertank
  • Is current revision? No
  • Comment

Revision Content

{{ CSSRef() }}

{{ SeeCompatTable() }}

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;
}

Specifications

Specification Status Comment
{{ SpecName('CSS3 Text', '#text-align-last', 'text-align-last') }} {{ Spec2('CSS3 Text') }}  

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{ CompatNo() }}
{{ WebkitBug("76173") }}
{{ CompatGeckoDesktop("12.0") }}{{ property_prefix('-moz') }} 5.5 {{ CompatNo() }} {{ 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') }} 6.0 {{ CompatNo() }} {{ CompatNo() }}
{{ WebkitBug("76173") }}

In Internet Explorer, the start and end values are not supported.

See also

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

Revision Source

<p>{{ CSSRef() }}</p>
<p>{{ SeeCompatTable() }}</p>
<h2 id="Summary">Summary</h2>
<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 class="cssprop">
  <li><dfn>{{ Xref_cssinitial() }}</dfn> <code>auto</code></li>
  <li><dfn>Applies to</dfn> block level elements</li>
  <li><dfn>{{ Xref_cssinherited() }}</dfn> yes</li>
  <li><dfn>Media</dfn> {{ Xref_cssvisual() }}</li>
  <li><dfn>{{ Xref_csscomputed() }}</dfn> as specified</li>
</ul>
<h2 id="Syntax">Syntax</h2>
<pre class="eval">
 text-align-last:  auto | start | end | left | right | center | justify | {{ Cssxref("inherit") }}</pre>
<h3 id="Values">Values</h3>
<dl>
  <dt>
    <code>auto</code></dt>
  <dd>
    The affected line is aligned per the value of {{ cssxref("text-align") }}.</dd>
  <dt>
    <code>start</code></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>
    <code>end</code></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>
    <code>left</code></dt>
  <dd>
    The inline contents are aligned to the left edge of the line box.</dd>
  <dt>
    <code>right</code></dt>
  <dd>
    The inline contents are aligned to the right edge of the line box.</dd>
  <dt>
    <code>center</code></dt>
  <dd>
    The inline contents are centered within the line box.</dd>
  <dt>
    <code>justify</code></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>
<h2 id="Examples">Examples</h2>
<pre class="Brush: css">
div {
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
}
</pre>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
  <thead>
    <tr>
      <th scope="col">Specification</th>
      <th scope="col">Status</th>
      <th scope="col">Comment</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{ SpecName('CSS3 Text', '#text-align-last', 'text-align-last') }}</td>
      <td>{{ Spec2('CSS3 Text') }}</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<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>5.5</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}<br />
          {{ WebkitBug("76173") }}</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>6.0</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}<br />
          {{ WebkitBug("76173") }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>In Internet Explorer, the <code>start</code> and <code>end</code> values are <a class="external" href="http://msdn.microsoft.com/en-us/library/ie/ms531163%28v=vs.85%29.aspx" title="http://msdn.microsoft.com/en-us/library/ie/ms531163%28v=vs.85%29.aspx">not supported</a>.</p>
<h3 id="See_also">See also</h3>
<ul>
  <li>{{ cssxref("text-align") }}</li>
</ul>
Revert to this revision