Primer CSS Truncate

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.

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.

Output: