Primer CSS is a CSS framework that comes with pre-styled components and a design language with spacing, typography, and Theming that helps in building a website effectively. This systematic method makes sure our patterns are steady and interoperable with every other. It is created with GitHub’s design system.
Primer CSS truncate is used to shorten the text when it reaches a larger length than required. In this article, we will be seeing Primer CSS Truncate. To truncate the text, it should have Truncate-text class and should be the direct child of the Truncate class.
Primer CSS Truncate Classes:
- Truncate: This class is the main container of the truncate component.
- Truncate-text: This class is applied to the text that should be truncated when there is not enough space.
Syntax:
<span class="Truncate">
<span class="Truncate-text">...</span>
</span>Example 1: This example shows how to use the above-mentioned classes to truncate a text.
<!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 - Primer CSS</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="text-center">
<h2 style="color: green;">GeeksforGeeks</h2>
<h4>Primer CSS - Truncate</h4>
</div>
<div class="d-flex flex-justify-center mt-6">
<div class="Box">
<span class="Truncate">
<span class="Truncate-text p-3" style="resize: horizontal;
overflow: scroll;">
This is a really long text with the
<b>Truncate-text </b>class
</span>
</span>
</div>
</div>
</body>
</html>
|
Output:
Example2: This example shows the use of the max-width property on the Truncate-Text to truncate it even when enough space is available.
<!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 - Primer CSS</title>
<link rel="stylesheet" href=
</head>
<body>
<div class="text-center">
<h2 style="color: green;">GeeksforGeeks</h2>
<h4>Primer CSS - Truncate</h4>
</div>
<div class="d-flex flex-justify-center mt-6">
<div class="Box" style="resize: horizontal;overflow: scroll;
width: 500px;">
<span class="Truncate">
<span class="Truncate-text p-3" style="max-width: 300px;">
This is a really long text
with the <b>Truncate-text</b> class
</span>
</span>
</div>
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/components/truncate#truncate