Spectre Text

Last Updated : 10 Feb, 2022

The Spectre text is one of the most useful features of Spectre that needs to use on text for decoration and styling. We can use these utilities for text alignment, styles, and overflow things.

Spectre Text Class:

text-left: This class is used to make left-aligned text.
text-center: This class is used to make centre-aligned text.
text-right: This class is used to make right-aligned text.
text-justify: This class is used to make justify text.
text-lowercase: This class is used to make the text in lowercase.
text-uppercase: This class is used to make the text in uppercase.
text-capitalize: This class is used to make the text capitalized
text-normal: This class is used to make the abnormal text into a normal text.
text-bold: This class makes the text bold.
text-italic: This class makes the text italic.
text-muted: This class makes the text muted.
text-large: This class makes the text large.
text-small: This class makes the text small.
text-tiny: This class makes the text tiny.
text-ellipsis: This class makes the text ellipsis.
text-clip: This class is used to truncate the text.
text-break: This class is used to break at arbitrary points

Syntax:

<div class="text-left">
 ....
</div>

Example 1: Below example illustrate the text loading.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Text Class</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
    <style> 
        div  
        { 
            height:100px; 
            width:100px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>SPECTRE Text Class</strong> 
        <br> 
    </center> 
    <strong>Text-left:</strong>     
    <p class="text-left">Geeksforgeeks</p> 
  
    <strong>Text-center:</strong> 
    <p class="text-center">Geeksforgeeks</p> 
  
    <strong>Text-right:</strong> 
    <p class="text-right">Geeksforgeeks</p> 
  
    <strong>Text-justify:</strong> 
    <p class="text-justify">A Computer Science Portal</p> 
  
    <strong>Text-lowercase:</strong> 
    <p class="text-lowercase">Geeksforgeeks</p> 
  
    <strong>Text-uppercase:</strong> 
    <p class="text-uppercase">Geeksforgeeks</p> 
  
    <strong>Text-capitalize:</strong> 
    <p class="text-capitalize">geeksforgeeks</p> 
          
</body> 
</html> 

Output:

Spectre Text

Example 2: The following code demonstrates the other text classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>SPECTRE Text Class</title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-exp.min.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/spectre.css/dist/spectre-icons.min.css"> 
    <style> 
        div { 
            height: 100px; 
            width: 100px; 
        } 
    </style> 
</head> 
  
<body> 
    <center> 
        <h1 class="text-success">GeeksforGeeks</h1> 
        <strong>SPECTRE Text Class</strong> 
        <br> 
        <strong>Normal Text:</strong> 
        <p class="text-normal">Geeksforgeeks</p> 
  
        <strong>Bold Text:</strong> 
        <p class="text-bold">Geeksforgeeks</p> 
  
        <strong>Italic Text:</strong> 
        <p class="text-italic">Geeksforgeeks</p> 
  
        <strong>Muted Text:</strong> 
        <p class="text-muted">Geeksforgeeks</p> 
  
        <strong>Large Text:</strong> 
        <p class="text-large">Geeksforgeeks</p> 
  
        <strong>Small Text:</strong> 
        <p class="text-small">Geeksforgeeks</p> 
  
        <strong>Tiny Text:</strong> 
        <p class="text-tiny">Geeksforgeeks</p> 
  
    </center> 
</body> 
</html> 