CSS properties - text-related

revision: March 16, 2024

Content

text-align property text-align-last property text-decoration property text-decoration-color property text-decoration-line property text-decoration-style property text-decoration-thickness property text-indent property text-justify property text-orientation property text-overflow property text-shadow property text-transform property

text-align property

top

- specifies the horizontal alignment of text in an element..

CSS syntax : text-align: left | right | center | justify | initial | inherit;

Property values:

left : aligns the text to the left

right : aligns the text to the right

center : centers the text

justify : stretches the lines so that each line has equal width (like in newspapers and magazines)

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textAlign="right"

example: text-align property

text-align: center:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align: left:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align: right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align: justify:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

code:

                    <div>
                        <div class="TXT-A">
                            <h4>text-align: center:</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
                            gravida libero rhoncus ut.</p>
                        </div>
                        <div class="TXT-B">
                            <h4>text-align: left:</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
                            gravida libero rhoncus ut.</p>
                        </div>
                        <div class="TXT-C">
                            <h4>text-align: right:</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
                            gravida libero rhoncus ut.</p>
                        </div>
                        <div class="TXT-D">
                            <h4>text-align: justify:</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat
                            gravida libero rhoncus ut.</p>
                        </div>
                    </div>
                    <style>
                        div.TXT-A {text-align: center;}
                        div.TXT-B {text-align: left;}
                        div.TXT-C {text-align: right;} 
                        div.TXT-D {text-align: justify;} 
                    </style>

text-align-last property

top

- specifies how to align the last line of a text.

Notice that the "text-align-last" property sets the alignment for all last lines within the selected element. So, if you have a <div> with three paragraphs in it, "text-align-last" will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use ":last child".

Note: In Edge prior 79, the "text-align-last" property only works on text that has "text-align: justify".

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

Property values:

auto : default value. The last line is justified and aligned left

left : the last line is aligned to the left

right : the last line is aligned to the right

center : the last line is center-aligned

justify : the last line is justified as the rest of the lines

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)

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)

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textAlignLast="right"

example: text-align-last property

text-align-last: right:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align-last: center:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-align-last: justify:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

code:

                    <div>
                        <h4>text-align-last: right:</h4>
                        <div class="TXT-E">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at 
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat 
                            gravida libero rhoncus ut.</p>
                        </div>
                        <h4>text-align-last: center:</h4>
                        <div class="TXT-F">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at 
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat 
                            gravida libero rhoncus ut.</p>
                        </div>
                        <h4>text-align-last: justify:</h4>
                        <div class="TXT-G">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at 
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat 
                            gravida libero rhoncus ut.</p>
                        </div>
                    </div>
                    <style>
                        div.TXT-E {text-align: justify; /* For Edge */ -moz-text-align-last: right; 
                            /* For Firefox prior 58.0 */ text-align-last: right;}
                        div.TXT-F {text-align: justify; /* For Edge */ -moz-text-align-last: center; 
                            /* For Firefox prior 58.0 */ text-align-last: center;}
                        div.TXT-G {text-align: justify; /* For Edge */ -moz-text-align-last: justify; 
                            /* For Firefox prior 58.0 */ text-align-last: justify;}
                    </style>

text-decoration property

top

- specifies the decoration added to text, and is a shorthand property for: "text-decoration-line (required)", " text-decoration-color", "text-decoration-style", "text-decoration-thickness".

CSS syntax : text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness|initial|inherit;

Property values:

text-decoration-line : sets the kind of text decoration to use (like underline, overline, line-through)

text-decoration-color : sets the color of the text decoration

text-decoration-style : sets the style of the text decoration (like solid, wavy, dotted, dashed, double)

text-decoration-thickness : sets the thickness of the decoration line

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textDecoration="underline"

example: text-decoration property

This is a heading 4 : decoration = overline red dotted 1vw

This is heading 4 : decoration = line-through blue 0.1vw

This is heading 4 : decoration = underline oraqnge dashed 0.2vw

This is heading 4 : decoration = underline overline lightseagreen solid 0.3vw

code:

                    <div>
                        <h4 class="TXT-H">This is a heading 4 : decoration = overline red dotted 1vw</h4>
                        <h4 class="TXT-I">This is heading 4 : decoration = line-through blue 0.1vw</h4>
                        <h4 class="TXT-J">This is heading 4 : decoration = underline oraqnge dashed 0.2vw</h3>
                        <h4 class="TXT-K">This is heading 4 : decoration = underline overline lightseagreen solid 0.3vw</h4>
                    </div>
                    <style>
                        h4.TXT-H {text-decoration: overline red dotted 1vw;}
                        h4.TXT-I {text-decoration: line-through blue  0.1vw;}
                        h4.TXT-J {text-decoration: underline orange dashed 0.2vw;}
                        h4.TXT-K { text-decoration: underline overline lightseagreen solid 0.3vw;}
                    </style>

text-decoration-color property

top

- specifies the color of the text-decoration (underlines, overlines, linethroughs).

CSS syntax : text-decoration-color: color | initial | inherit;

Property values:

color : specifies the color of the text-decoration

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textDecorationColor="red"

example: text-decoration-color property

The text-decoration-color Property

The color of the underline should now be red!

code:

                    <div>
                        <h2 class="TXT-L">The text-decoration-color Property</h2>
                        <p class="TXT-M">The color of the underline should now be red!</p>
                    </div>
                    <style>
                        h2.TXT-L{text-decoration: underline overline; -webkit-text-decoration-color: magenta; /*Safari*/
                            text-decoration-color: magenta;}
                        p.TXT-M {text-decoration: underline; -webkit-text-decoration-color: red; /* Safari */
                            text-decoration-color: red;}
                    </style>

text-decoration-line property

top

- sets the kind of text decoration to use (like underline, overline, line-through).

Note: You can also combine more than one value, like underline and overline to display lines both under and over the text.

CSS syntax : text-decoration-line: none | underline | overline | line-through | initial | inherit;

Property values:

none : default value. Specifies no line for the text-decoration

underline : specifies that a line will be displayed under the text

overline : specifies that a line will be displayed over the text

line-through : specifies that a line will be displayed through the text

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textDecorationLine="overline"

example: text-decoration-line property

This is some text with a line on top.

This is some text with an underline.

This is some text with a line-through.

This is some text with an overline and an underline.

code:

                    <div>
                        <div class="TXT-N">This is some text with a line on top.</div><br>
                        <div class="TXT-O">This is some text with an underline.</div><br>
                        <div class="TXT-P">This is some text with a line-through.</div><br>
                        <div class="TXT-Q">This is some text with an overline and an underline.</div>
                    </div>
                    <style>
                        div.TXT-N {-webkit-text-decoration-line: overline; /* Safari */ 
                            text-decoration-line: overline;}
                        div.TXT-O {-webkit-text-decoration-line: underline; /* Safari */ 
                            text-decoration-line: underline;}
                        div.TXT-P {-webkit-text-decoration-line: line-through; /* Safari */ 
                            text-decoration-line: line-through;}
                        div.TXT-Q {-webkit-text-decoration-line: overline underline; /* Safari */ 
                            text-decoration-line: overline underline;}    
                    </style>

text-decoration-style property

top

- sets the style of the text decoration (like solid, wavy, dotted, dashed, double).

CSS syntax : text-decoration-style: solid | double | dotted | dashed | wavy | initial | inherit;

Property values:

solid : default value. The line will display as a single line

double : the line will display as a double line

dotted : the line will display as a dotted line

dashed : the line will display as a dashed line

wavy : the line will display as a wavy line

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textDecorationStyle="wavy"

example: text-decoration-style property

This is some text with a solid underline.

This is some text with a wavy underline.

This is some text with a double underline.

This is some text with a wavy over- and underline.

code:

                    <div>
                        <div class="TXT-R">This is some text with a solid underline.</div><br>
                        <div class="TXT-S">This is some text with a wavy underline.</div><br>
                        <div class="TXT-T">This is some text with a double underline.</div><br>
                        <div class="TXT-U">This is some text with a wavy over- and underline.</div>
                    </div>
                    <style>
                        div.TXT-R {text-decoration-line: underline; text-decoration-style: solid;}
                        div.TXT-S {text-decoration-line: underline; text-decoration-style: wavy;}
                        div.TXT-T {text-decoration-line: underline; text-decoration-style: double;}
                        div.TXT-U {text-decoration-line: overline underline; text-decoration-style: wavy;} 
                    </style>

text-decoration-thickness property

top

- specifies the thickness of the decoration line.

CSS syntax : text-decoration-thickness: auto | from-font | length/percentage | initial | inherit;

Property values:

auto : the browser chooses the thickness of the decoration line

from-font : if a font file contains information about a preferred thickness, use that value. If not, behave as auto

length/percentage : specifies the thickness as a length or %

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textDecorationThickness="0.5vw"

example: text-decoration-thickness property

This is a heading 4

This is heading 4

code:

                    <div>
                        <h4 class="TXT-V">This is a heading 4</h4>
                        <h4 class="TXT-W">This is heading 4 </h4>
                        <h4 class="TXT-X">This is heading 4</h3>
                        <h4 class="TXT-Y">This is heading 4</h4>
                    </div>
                    <style>
                        h4.TXT-V {text-decoration: underline; text-decoration-thickness: auto;}
                        h4.TXT-W {text-decoration: underline; text-decoration-thickness: 5px;}
                        h4.TXT-X {text-decoration: underline; text-decoration-thickness: 50%; }
                        /* Use shorthand property */
                        h4.TXT-Y {text-decoration: underline solid red 50%;}
                    </style>

text-indent property

top

- specifies the indentation of the first line in a text-block.

Note: negative values are allowed. The first line will be indented to the left if the value is negative.

CSS syntax : text-indent: length | initial | inherit;

Property values:

length : defines a fixed indentation in px, pt, cm, em, etc. Default value is 0.

% : defines the indentation in % of the width of the parent element

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textIndent="5vw"

example: text-indent property

text-indent: 5vw:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-indent: -2vw:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

text-indent: 30%:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.

code:

                    <div>
                        <h4>text-indent: 5vw:</h4>
                        <div class="TXT-Z">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at 
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat 
                            gravida libero rhoncus ut.</p>
                        </div>
                        <h4>text-indent: -2vw:</h4>
                        <div class="TXT-AA">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at 
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat 
                            gravida libero rhoncus ut.</p>
                        </div>
                        <h4>text-indent: 30%:</h4>
                        <div class="TXT-AB">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at 
                            erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat 
                            gravida libero rhoncus ut.</p>
                        </div>
                    </div>
                    <style>
                        div.TXT-Z {text-indent: 50px;}
                        div.TXT-AA {text-indent: -2em;}
                        div.TXT-AB {text-indent: 30%;}
                    </style>

text-justify property

top

- specifies the justification method of text when text-align is set to "justify".

CSS syntax : text-justify: auto | inter-word | inter-character | none | initial | inherit;

Property values:

auto : the browser determines the justification algorithm

inter-word : increases/decreases the space between words

inter-character : increases/decreases the space between characters

none : disables justification methods

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textJustify="inter-word"

example: text-justify property

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'

Tip: Resize the browser window to see how the value "justify" works.

code:

                    <div>
                        <div class="TXT-AC">In my younger and more vulnerable years my father gave me some advice that
                        I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' 
                        he told me, 'just remember that all the people in this world haven't had the advantages that 
                        you've had.'</div>
                        <p><b>Tip:</b> Resize the browser window to see how the value "justify" works.</p>
                    </div>
                    <style>
                        div.TXT-AC {text-align: justify; text-justify: inter-word;}
                    </style>

text-orientation property

top

- specifies the orientation of characters.

Note: works only whenwriting-mode is set to vertical.

CSS syntax : text-orientation: mixed | upright | sideways | sideways-right | use-glyph-orientation | initial | inherit;

Property values:

mixed : deafult value. Characters are rotated 90 degrees clockwise.

upright : characters are not rotated, but standing upright.

sideways : only supported in Firefox. Characters are orientated the same as the text lines are oriented with writing-mode vertical, 90 degrees clockwise.

sideways-right : equal to property value sideways. Kept for compatibility purposes.

use-glyph-orientation : for use in SVG elements, so that text inherits deprecated SVG properties glyph-orientation-vertical and glyph-orientation-horizontal.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textOrientation ="upright"

example: text-orientation property

Left box has text-orientation: mixed. Right box has text-orientation: upright.

text-orientation: mixed

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

text-orientation: upright

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit.

code:

                    <div>
                        <p>Left box has text-orientation: mixed. Right box has text-orientation: upright.</p>
                        <div class="TXT-AD">
                            <h4>text-orientation: mixed</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
                            at pulvinar felis blandit.</p>
                        </div>
                        <div class="TXT-AE">
                            <h4>text-orientation: upright</h4>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar,
                            at pulvinar felis blandit.</p>
                        </div>
                    </div>
                    <style>
                        div.TXT-AD, div.TXT-AE{writing-mode: vertical-lr; border: solid black 0.1vw; display: 
                            inline-block; height: 25vw; width: 15vw;  margin: 0.5vw;}
                        div.TXT-AD {text-orientation: mixed;}
                        div.TXT-AE {text-orientation: upright;}  
                    </style>

text-overflow property

top

- specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.

Both of the following properties are required for text-overflow: {white-space: nowrap;}, {overflow: hidden;}.

CSS syntax : text-overflow: clip | ellipsis | string | initial | inherit;

Property values:

clip : default value. The text is clipped and not accessible.

ellipsis : render an ellipsis ("...") to represent the clipped text.

string : render the given string to represent the clipped text.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textOverflow="ellipsis"

example: text-overflow property

text-overflow: clip (default):

Hello world!

text-overflow: ellipsis:

Hello world!

text-overflow: "----" (user defined string):

Hello world!

Note: The text-overflow: "string" only works in Firefox.

code:

                    <div>
                        <h4>text-overflow: clip (default):</h4>
                        <div class="TXT-AF">Hello world!</div>
                        <h4>text-overflow: ellipsis:</h4>
                        <div class="TXT-AG">Hello world!</div>
                        <h4>text-overflow: "----" (user defined string):</h4>
                        <div class="TXT-AH">Hello world!</div>
                        <p><strong>Note:</strong> The text-overflow: "<em>string</em>" only works in Firefox.</p>
                    </div>
                    <style>
                        div.TXT-AF {white-space: nowrap; width: 4vw; overflow: hidden; text-overflow: clip;  
                            border: 0.1vw solid #000000;}
                        div.TXT-AG {white-space: nowrap; width: 4vw; overflow: hidden; text-overflow: ellipsis; 
                            border: 0.1vw solid #000000;}
                        div.TXT-AH {white-space: nowrap; width: 4vw; overflow: hidden; text-overflow: "----"; 
                        border: 0.1vw solid #000000;}
                    </style>

text-shadow property

top

- adds shadow to text. This property accepts a comma-separated list of shadows to be applied to the text.

CSS syntax : text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

Property values:

h-shadow : required. The position of the horizontal shadow. Negative values are allowed.

v-shadow : required. The position of the vertical shadow. Negative values are allowed.

blur-radius : optional. The blur radius. Default value is 0.

color : optional. The color of the shadow.

none : default value. No shadow.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textShadow="0.2vw 0.5vw 0.5vw red"

example: text-shadow property

The text-shadow Property

Text-shadow with blur effect

code:

                    <div>
                        <h1 class="TXT-AI">The text-shadow Property</h1>
                        <h1 class="TXT-AJ">Text-shadow with blur effect</h1>
                    </div>
                    <style>
                        h1.TXT-AI {text-shadow: 0.2vw 0.2vw #FF0000;}     
                        h1.TXT-AJ {text-shadow: 0.2vw 0.2vw 0.8vw #FF0000;} 
                    </style>

text-transform property

top

- controls the capitalization of text.

CSS syntax : text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

Property values:

none : no capitalization. The text renders as it is. This is default.

capitalize : transforms the first character of each word to uppercase .

uppercase : transforms all characters to uppercase.

lowercase : transforms all characters to lowercase.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.textTransform="upoercase"

example: text-transform property

text-transform: uppercase:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-transform: lowercase:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

text-transform: capitalize:

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

code:

                    <div>
                        <h4>text-transform: uppercase:</h4>
                        <div class="TXT-AK">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                        <h4>text-transform: lowercase:</h4>
                        <div class="TXT-AL">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                        <h4>text-transform: capitalize:</h4>
                        <div class="TXT-AM">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
                    </div>
                    <style>
                        div.TXT-AK {text-transform: uppercase;}
                        div.TXT-AL {text-transform: lowercase;}
                        div.TXT-AM {text-transform: capitalize;}  
                    </style>