Primer CSS Truncate Multiple Items

Last Updated : 05 May, 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. It is created with GitHub’s design system.

In this article, we will be seeing Primer CSS Truncate Multiple Items. The Truncate-text items can be added in the same row, and when enough space will not be available, they will truncate evenly. However, if you want an item to not truncate first, Truncate-text–primary can be used. There can be multiple elements with Truncate-text–primary class added to them.

Primer CSS Truncate Multiple Items Classes:

Truncate-text: This class is used on the text we want to truncate. It should be a direct child of the Truncate class.
Truncate-text–primary: This class is used on an element that should not truncate first.

Syntax:

<span class="Truncate">
    <span class="Truncate-text">
        ...
    </span>
    <span class="Truncate-text">
        ...
    </span>
</span>

Example 1: This example illustrates how multiple items truncate.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1.0"> 
    <title> Truncate Multiple Items - Primer CSS </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2 style="color: green;"> GeeksforGeeks </h2> 
        <h4> Primer CSS - Truncate Multiple Items </h4> 
    </div> 
  
    <div class="d-flex flex-justify-center mt-6"> 
        <div class="Box" style="resize: horizontal; 
                                overflow: scroll;"> 
            <span class="Truncate"> 
                <span class="Truncate-text p-2" > 
                    Learn Data Structures 
                </span> 
                <span class="Truncate-text p-2" > 
                    Learn Basic Algorithms 
                </span> 
                <span class="Truncate-text p-2" > 
                    Start Solving Questions 
                </span> 
            </span> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Truncate Multiple Items

Example 2: This example illustrates the use of the Truncate-text–primary class to avoid a text to truncate first. Here the item with Truncate-text–primary class is shown in bold text.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
                "width=device-width, initial-scale=1.0"> 
    <title> Truncate Multiple Items - Primer CSS </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@19.8.2/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h2 style="color: green;"> GeeksforGeeks </h2> 
        <h4> Primer CSS - Truncate Multiple Items </h4> 
    </div> 
      
    <div class="d-flex flex-justify-center mt-6"> 
        <div class="Box" style="resize: horizontal;overflow: scroll;"> 
            <span class="Truncate"> 
                <span class="Truncate-text p-2 Truncate-text--primary"> 
                    <b>Learn Data Structures</b> 
                </span> 
                <span class="Truncate-text p-2" > 
                    Learn Basic Algorithms 
                </span> 
                <span class="Truncate-text p-2" > 
                    Start Solving Questions 
                </span> 
            </span> 
        </div> 
    </div> 
</body> 
  
</html>