CSS Text Properties includes all properties related to text, like text-align, text-decoration etc. These properties can work on individual element like <p>, <h1> etc or can be assigned to parent element, exp <body>, <div> etc. By assigning Text Property to parent element, all descendants can inherit that property from parent.

Text Properties List


CSS Text Align

Css Text Align property is used to align text in left, center, right and justify. Default text align is left for many languages. Only Block Level Elements supports text align property . That means p, headings h1-h6, blockquote, elements support text align, but inline level elements doesn't. But inline can inherit text align from parent element.

Text align left, center and right

CSS Text Align
Text-align Value
left align text to the left
center align text to the center
right align text to the right
justify Justified text for multi line text

CSS Text Align Examples

Text Align Left

Text Align Center

Text Align Right


<style>
    .text-left{text-align:left;}
    .text-center{text-align:center;}
    .text-right{text-align:right;}
</style>

<h3 class="text-left">Text Align Left</h3>
<h3 class="text-center">Text Align Center</h3>
<h3 class="text-right">Text Align Right</h3>

Text Align Justify

Text Align Justify is mainly used in e-papers, blogs and news websites to align text from both left and right side. Justify adds extra space between words for alignment.

Text Align Left

This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language

Text Align Justify

This is text align justify. Justify text automatically align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automatically align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automatically align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automatically align itself from both left and right sides, by adding word spacing in text.


<style>
    .text-justify{text-align:justify;}
</style>

<h3 class="text-justify">Example text.</h3>


Text Decoration

CSS text Decoration add or remove decoration of text, like underline, overline, line-through and none. Text decoration can have text decoration line, text decoration color and text decoration style..

Text Decoration shorthand is the combination of four properties, i.e

  1. text decoration line (compulsory)
  2. text decoration style
  3. text decoration color
  4. text decoration thickness

Text Decoration line

CSS Text Decoration
text-decoration Role Example
overline create a line over text

Text Decoration overline

underline create a line under text

Text Decoration underline

line-through strike through text

Text Decoration line-through

none Remove default decoration of text.

Text Decoration none

Text Decoration Examples

Text Decoration Overline

Text Decoration underline

Text Decoration line-through

Text Decoration none


<style>
    .text5{text-decoration-line:overline;}
    .text6{text-decoration-line:underline;}
    .text7{text-decoration-line:line-through;}
    .text8{text-decoration-line:none;}
</style>

<h4 class="text5">Text Decoration overline</h4>
<h4 class="text6">Text Decoration underline</h4>
<h4 class="text7">Text Decoration line-through</h4>
<h4 class="text8">Text Decoration none</h4>


Text Decoration Style

Text Decoration Style change style of text decoration. Default value is solid.

text-decoration-style Value Example
solid create a solid line

Text Decoration Style solid

dashed create a dashed line

Text Decoration Style dashed

dotted create a dotted line

Text Decoration Style dotted

double create a double line

Text Decoration Style double

Text Decoration Color

text-decoration-color change color of text decoration line. Default value is currentColor.

text-decoration-color Value Example
black create a solid line with black color

Text Decoration color

red create a solid line with red color

Text Decoration Color

blue create a solid line with blue color

Text Decoration Color

Text Decoration Thickness

text-decoration-thickness change thickness of text decoration line. The value can be in px, em or rem scales.

Thickness is always works with text decoration line.

Text Decoration Thickness 1px

Text Decoration Thickness 5px

Text Decoration Thickness 1rem


  <style>
    .p1{ text-decoration: underline solid 1px #000;}
    .p2{ text-decoration: underline solid 5px #00f;}
    .p3{ text-decoration: underline solid 1rem #f00;}
  </style>

  <p class="p1">Text Decoration Thickness 1px</p>
  <p class="p2">Text Decoration Thickness 5px</p>
  <p class="p3">Text Decoration Thickness 1rem</p>
  1. Note: Text-decoration line is compulsory, default style is solid and color is font color.
  2. use -webkit-prefix for text decoration style and color. For exp,
    
    <style>
      h1{
        text-decoration: underline dashed red;
        -webkit-text-decoration: underline dashed red;
      }
    </style>
    

Text Transform

CSS Text Transform property is used to transform text from lowercase to uppercase, lowercase to capitalize and uppercase to lowercase for alphabets.

Text Transform Capitalize

Text Transform Lowercase

Text Transform Uppercase

Text Transform None



<style>
    .text9{text-transform:capitalize;}
    .text10{text-transform:lowercase;}
    .text11{text-transform:uppercase;}
    .text12{text-transform:none;}
</style>

<p class="text9">tech altum</p>
<p class="text10">tech altum</p>
<p class="text11">tech altum</p>
<p class="text12">tech altum</p>

White-space

White Space property change behavior of white space in text. The default value is normal. We can change white-space to nowrap, pre, pre-line or pre-wrap. See example below

This example shows how white-space is managed using css white-space property. This is a new line

This example shows how white-space is managed using css white-space property. This is a new line

This example shows how white-space is managed using css white-space property. This is a new line

This example shows how white-space is managed using css white-space property. This is a new line

This example shows how white-space is managed using css white-space property. This is a new line

<style>  
.p1{ white-space:normal}
.p2{ white-space:nowrap}
.p3{ white-space:pre}
.p4{ white-space:pre-line}
.p5{ white-space:pre-wrap}
<style>

Text-overflow

text-overflow property can add ellipsis (...) after text if tet is overflowing from line. To add ellipsis, we also need to add overflow:hidden and white-space:nowrap to text element. See example

Tech Altum is IT Training Institute in Noida having 12+ years experience in training and placements


<style>
.t1{
  text-overflow: ellipsis; 
  max-width: 400px; 
  overflow: hidden; 
  white-space: nowrap;
}
<style>

<p class="t1">Tech Altum is IT Training Institute in Noida having 12+ years experience in training and placements.</p>

Word Break

Word Break property of css is used to specify whether to break lines within words or not. Default value is normal. Another value is break-all.

Word Break break all can break words for non Chinese, non Japanese and non Korean text only.

word-break normal

word-break break-word

 
<style>
    div{ width:50px; background:#fcc}
    .div1 p{ word-break: normal }
    .div2 p{ word-break: break-all }
</style>
    
<div class="div1">
    <p>word-break normal</p>
</div>
<div class="div2">
    <p>word-break break-word</p>
</div>

Word Wrap / overflow-wrap

CSS Word Wrap or overflow-wrap property is used to break word. To add hyphens in overflow words, use hyphens: auto.

This example shows how word wrap normal works in css.

This example shows how word wrap break work works in css.


<style>
    div{ width:50px; background:#fcc}
    .div1 p{ overflow-wrap: normal }
    .div2 p{ overflow-wrap: break-word; hyphens: auto }
</style>
    
<div class="div1">
    <p>This example shows how word wrap normal works in css</p>
</div>
<div class="div2">
    <p>This example shows how word wrap break-work works in css.</p>
</div>

Word Spacing

Word spacing is spacing between words, Default value of word spacing is 0px. Word Spacing can have both positive and negative values.

Word Spacing 0

Word Spacing 25px

Word spacing 50px



<style>
	.text1{ word-spacing:0px;}
	.text2{ word-spacing:25px;}
	.text3{ word-spacing:50px;}
</style>

	<p class="text1">Word spacing 0px</p>
	<p class="text2">Word spacing 25px</p>
	<p class="text3">Word spacing 50px</p>


Letter Spacing

Letter Spacing is space between two letters. Default value of letter spacing is 0 px. Letter Spacing can have both positive and negative value.

Letter Spacing 0px

Letter Spacing 5px

Letter Spacing 10px

Letter Spacing 20px



<style>
.text15{ letter-spacing:0px;}
.text16{ letter-spacing:05px;}
.text17{ letter-spacing:10px;}
.text18{ letter-spacing:20px;}
</style>

<p class="text15">Letter Spacing 0px</p>
<p class="text16">Letter Spacing 0px</p>
<p class="text17">Letter Spacing 10px</p>
<p class="text18">Letter Spacing 20px</p>

More CSS Text properties

  1. CSS text shadow