CSS Text Properties

Text Properties List

• Text Align
• Text Decoration
• Text Transform
• White Space
• Text Overflow
• Word Break
• overflow-wrap / Word Wrap
• Word Spacing
• Letter Spacing

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.

CSS Text Align Examples

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

<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

Text Decoration Examples

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

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

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.

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

Text Transform

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

<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

<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

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

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

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

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

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