Marusya's School Notes

CSS3 Text contains some new features with these text properties:

text-align-last
text-emphasis
text-justify
text-overflow
word-wrap
word-break

CSS Text-Align-Last Property

The syntax for this property:

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

The text-align-last property specifies how to align the last line of a text, but it will only work for elements with the text-align property set to "justify." Demonstrated below are various options of aligning the last line of the contents in a <div> element:

HTML file:	Displayed by browser:
<style> div#ex1 { text-align: justify; -moz-text-align-last: auto; /* Code for Firefox / text-align-last: auto; } div#ex2 { text-align: justify; -moz-text-align-last: left; / Code for Firefox / text-align-last: left; } div#ex3 { text-align: justify; -moz-text-align-last: right; / Code for Firefox / text-align-last: right; } div#ex4 { text-align: justify; -moz-text-align-last: center; / Code for Firefox / text-align-last: center; } div#ex5 { text-align: justify; -moz-text-align-last: justify; / Code for Firefox / text-align-last: justify; } div#ex6 { text-align: justify; -moz-text-align-last: start; / Code for Firefox / text-align-last: start; } div#ex7 { text-align: justify; -moz-text-align-last: end; / Code for Firefox / text-align-last: end; } div#ex8 { text-align: justify; -moz-text-align-last: initial; / Code for Firefox / text-align-last: initial; } div#ex9 { text-align: justify; -moz-text-align-last: inherit; / Code for Firefox / text-align-last: inherit; } </style> <body> <h3>Text-align-last:auto; (default, last line justified and aligned left)</h3> <div id="ex1">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> <h3>Text-align-last:left; (last line aligned to the left)</h3> <div id="ex2">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> <h3>Text-align-last:right; (last line aligned to the right)</h3> <div id="ex3">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> <h3>Text-align-last:center; (last line is center-aligned)</h3> <div id="ex4">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> <h3>Text-align-last:justify; (last line is justified like previous lines)</h3> <div id="ex5">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> <h3>Text-align-last:start; <span style="color:teal;">(Only Firefoxsee note below)</span></h3> <div id="ex6">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> <h3>Text-align-last:end; <span style="color:teal;">(Only Firefox*see note below)</span></h3> <div id="ex7">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> <h3>Text-align-last:initial; (sets property to default value)</h3> <div id="ex8">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> <h3>Text-align-last:inherit; (inherits property from parent element)</h3> <div id="ex9">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div> </body>	Text-align-last:auto; (default, last line justified and aligned left) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align property set to justify. This <div> element is where you will see the result of the text-align-last property. Text-align-last:left; (last line aligned to the left) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align property set to justify. This <div> element is where you will see the result of the text-align-last property. Text-align-last:right; (last line aligned to the right) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align property set to justify. This <div> element is where you will see the result of the text-align-last property. Text-align-last:center; (last line is center-aligned) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align property set to justify. This <div> element is where you will see the result of the text-align-last property. Text-align-last:justify; (last line is justified like previous lines) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align property set to justify. This <div> element is where you will see the result of the text-align-last property. Text-align-last:start; (Only Firefoxsee note below) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align* property set to justify. This <div> element is where you will see the result of the text-align-last property. Text-align-last:end; (Only Firefoxsee note below) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align* property set to justify. This <div> element is where you will see the result of the text-align-last property. Text-align-last:initial; (sets property to default value) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align property set to justify. This <div> element is where you will see the result of the text-align-last property. Text-align-last:inherit; (inherits property from parent element) You can use the text-align-last property to align the last line of a text, but only if the text has the text-align property set to justify. This <div> element is where you will see the result of the text-align-last property. Note: The text-align-last property currently only works in Internet Explorer and Firefox. (Firefox requires -moz-text-align-last: value;* in the stylesheet.) The "start" and "end" values are not supported by Internet Explorer, but Firefox displays these values correctly: START: The last line is aligned at the beginning of the line (left if the text-direction is left-to-right, and right is the text-direction is right-to-left). Since our text-direction in this example is left-to right, the last line is left aligned -- in Firefox only. END: The last line is aligned at the end of the line (right if the text-direction is left-to-right, and left is the text-direction is right-to-left). Since our text-direction in this example is left-to right, the last line is right aligned -- in Firefox only.

HTML file:

Displayed by browser:

<body>
<h3>Text-align-last:auto; (default, last line justified and aligned left)</h3>
<div id="ex1">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>

<h3>Text-align-last:left; (last line aligned to the left)</h3>
<div id="ex2">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>

<h3>Text-align-last:right; (last line aligned to the right)</h3>
<div id="ex3">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>

<h3>Text-align-last:center; (last line is center-aligned)</h3>
<div id="ex4">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>

<h3>Text-align-last:justify; (last line is justified like previous lines)</h3>
<div id="ex5">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>

<h3>Text-align-last:start; <span style="color:teal;">(Only Firefox*see note below)</span></h3>
<div id="ex6">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>

<h3>Text-align-last:end; <span style="color:teal;">(Only Firefox*see note below)</span></h3>
<div id="ex7">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>

<h3>Text-align-last:initial; (sets property to default value)</h3>
<div id="ex8">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>

<h3>Text-align-last:inherit; (inherits property from parent element)</h3>
<div id="ex9">You can use the text-align-last property to align the last line of a text, but only if the text has the <b>text-align</b> property set to justify. This <div> element is where you will see the result of the <b>text-align-last</b> property.</div>
</body>

Text-align-last:auto; (default, last line justified and aligned left)

You can use the text-align-last property to align the last line of a text, but only if the text has the text-align property set to justify. This <div> element is where you will see the result of the text-align-last property.

Text-align-last:left; (last line aligned to the left)

Text-align-last:right; (last line aligned to the right)

Text-align-last:center; (last line is center-aligned)

Text-align-last:justify; (last line is justified like previous lines)

Text-align-last:start; (Only Firefox*see note below)

Text-align-last:end; (Only Firefox*see note below)

Text-align-last:initial; (sets property to default value)

Text-align-last:inherit; (inherits property from parent element)

*Note:

The text-align-last property currently only works in Internet Explorer and Firefox. (Firefox requires -moz-text-align-last: value; in the stylesheet.)

The "start" and "end" values are not supported by Internet Explorer, but Firefox displays these values correctly:

START:: The last line is aligned at the beginning of the line (left if the text-direction is left-to-right, and right is the text-direction is right-to-left). Since our text-direction in this example is left-to right, the last line is left aligned -- in Firefox only.
END:: The last line is aligned at the end of the line (right if the text-direction is left-to-right, and left is the text-direction is right-to-left). Since our text-direction in this example is left-to right, the last line is right aligned -- in Firefox only.