Primer CSS Truncate Custom Max Widths

Last Updated : 14 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 Custom Max Widths is used to define the custom width of any element that it takes, even if there is sufficient space available. In this article, we will discuss Primer CSS Custom max widths.

Primer CSS Truncate Custom Max Widths 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-2" style="resize:horizontal;
                            overflow: scroll;">
  <div class="Truncate">
    <span class="Truncate-text Truncate-text--expandable" 
          style="max-width: .....;">
            ......
    </span>
  </div>
</div>

Example 1: Below example demonstrates the use of Primer CSS Truncate Custom Max Widths using different inline max-widths mentioned.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title> Primer CSS Truncate Custom max widths </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 Custom max widths </h3>
         
        <div class="Box p-2" style="resize:horizontal; overflow: scroll;">
            <div class="Truncate">
              <span class="Truncate-text Truncate-text--expandable"
                    style="max-width: 200px;">
                GeeksforGeeks, It is a Computer Science portal for 
                all the geeks across the globe
              </span>
            </div><br>
 
            <div class="Truncate">
              <span class="Truncate-text Truncate-text--expandable"
                    style="max-width: 100px;">
                GeeksforGeeks, It is a Computer Science portal for 
                all the geeks across the globe
              </span>
            </div><br>
 
            <div class="Truncate">
              <span class="Truncate-text Truncate-text--expandable"
                    style="max-width: 50px;">
                GeeksforGeeks, It is a Computer Science portal for 
                all the geeks across the globe
              </span>
            </div>
        </div>
    </center>
</body>
 
</html>

Output:

Primer CSS Truncate Custom Max Widths

Example 2: Below is another example that demonstrates the use of Primer CSS Truncate Custom Max Widths using different inline max-widths mentioned.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title> Primer CSS Truncate Custom max widths </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 Custom max widths </h3>
         
        <div class="Box p-2" style="resize:horizontal; overflow: scroll;">
            <div class="Truncate">
              <span class="Truncate-text Truncate-text--expandable"
                    style="max-width: 200px;">
                GeeksforGeeks, It is a Computer Science portal for 
                all the geeks across the globe
              </span>
            </div><br>
 
            <div class="Truncate">
              <span class="Truncate-text Truncate-text--expandable"
                    style="max-width: 100px;">
                GeeksforGeeks, It is a Computer Science portal for 
                all the geeks across the globe
              </span>
            </div><br>
 
            <div class="Truncate">
              <span class="Truncate-text Truncate-text--expandable"
                    style="max-width: 50px;">
                GeeksforGeeks, It is a Computer Science portal for 
                all the geeks across the globe
              </span>
            </div>
        </div>
    </center>
</body>
 
</html>