CSS Text Align, Text Decoration, Transform, word break, white-space, text-overflow

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.

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-indent

Text Indent property is used to change default indentation of css text. Text-Indent changes the position of first word of first line in right direction or let direction. If text indent is negative, it will move towards left and overflow from document.

This is how CSS Text indent property works. The text indent of this paragraph is 100px.

This is how CSS Text indent property works. The text indent of this paragraph is 200px.

This is how CSS Text indent property works. The text indent of this paragraph is -100px..


<style>
    .text4{text-indent:100px; color:red}
    .text5{text-indent:200px; color:blue}
    .text6{text-indent:-50px; color:green}
</style>

<p class="text4">This is how CSS Text indent property works. The text indent of this paragraph is 100px.</p>

<p class="text5">This is how CSS Text indent property works. The text indent of this paragraph is 200px.</p>

<p class="text6">This is how CSS Text indent property works. The text indent of this paragraph is -50px.</p>

Avoid text-indent in negative.

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

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 Example

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

Note: Text-decoration line is compulsory, default style is solid and color is font color.

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

<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

CSS text shadow