Primer CSS Truncate Expand on Hover or Focus

Last Updated : 12 Apr, 2022

Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible.

Primer CSS offers Truncate which is used with text that reaches a length that is larger than the existing container, shorten with ellipses. Primer CSS Truncate Expand on Hover or Focus is used to expand the text when hover or focus state is applied to them. In this article, we will discuss Truncate Expand on Hover or Focus.

Primer CSS Truncate Expand on Hover or Focus Classes:

Truncate-text: This class is used to define a truncated text.
Truncate-text–expandable: This class is used to expand the truncated text to the complete when hover or focus state is applied.

Syntax:

<div class="Box p-5" style="resize: horizontal; 
                            overflow: scroll;">
  <span class="Truncate">    
    <a href="#" class="Truncate-text 
                      Truncate-text--expandable">
       ......
    </a>
  </span>
</div>

Example 1: Below is the example that demonstrates the use of Primer CSS Truncate Expand on Hover or Focus using text inside the para tag.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Primer CSS Truncate Expand on Hover or Focus </title>     
    <link  rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Truncate Expand on Hover or Focus </h3> 
          
        <div class="Box p-5" style="resize: horizontal;  
             overflow: scroll; width: 800px;"> 
            <span class="Truncate">     
              <p href="#" class="Truncate-text Truncate-text--expandable"> 
                GeeksforGeeks is a Computer Science Portal 
              </p> 
  
  
              <p href="#" class="Truncate-text Truncate-text--expandable"> 
                GeeksforGeeks is a Computer Science Portal 
              </p> 
  
  
              <p href="#" class="Truncate-text Truncate-text--expandable"> 
                GeeksforGeeks is a Computer Science Portal 
              </p> 
  
            </span> 
        </div> 
    </center> 
</body> 
  
</html>

Output:

Primer CSS Truncate Expand on Hover or Focus

Example 2: Below is the example that demonstrates the use of Primer CSS Truncate Expand on Hover or Focus using text inside the anchor tag.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Primer CSS Truncate Expand on Hover or Focus </title>     
    <link  rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <center> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Truncate Expand on Hover or Focus </h3> 
          
        <div class="Box p-5" style="resize: horizontal;  
             overflow: scroll; width: 800px;"> 
            <span class="Truncate">     
              <a href="#" class="Truncate-text Truncate-text--expandable"> 
                  GeeksforGeeks is a Computer Science Portal 
              </a> 
  
              <a href="#" class="Truncate-text Truncate-text--expandable"> 
                  GeeksforGeeks is a Computer Science Portal 
              </a> 
  
              <a href="#" class="Truncate-text Truncate-text--expandable"> 
                  GeeksforGeeks is a Computer Science Portal 
              </a> 
            </span> 
        </div> 
    </center> 
</body> 
  
</html>