Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Primer CSS Truncate Expand on Hover or Focus
Text display is an essential factor in web designing which affects the user experience and the readability of your website. If your text is displayed properly in an organized manner, the users will easily understand it and hence, will be attracted to your website. However, sometimes, the text may be too long for a specified space in the webpage. To properly display that text, we use the truncate method. This method is offered by Primer CSS in which you can not only truncate your text but also expand it on hover or focus effect. In this article, we will discuss how this works and the classes which enables us to do so.
Installation: Before using any of the classes in Primer CSS, install it from npm:
npm install --save @primer/cssor use the CDN link in your HTML:
<link href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel="stylesheet" />
Syntax
<div class="Truncate">
<element class="Truncate-text Truncate-text--expandable">
Your long text content here...
</element>
</div>
Primer CSS Truncate Classes
To expand your truncated text while it is in hover or focus state, Primer CSS has built-in classes:
| Class | Description |
|---|---|
Truncate |
Container wrapper for truncated content |
Truncate-text |
Truncates any text that overflows the container |
Truncate-text--expandable |
Expands the truncated text on hover or focus |
Example: Expandable Anchor Tags
In this example, we create a resizable box containing anchor tags that truncate and expand on hover
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
<h1 style="margin: 10px">Primer CSS Truncate Expand on Hover</h1>
<p style="margin: 10px">The following truncated text expands when hovered:</p>
<div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px; width: 300px;">
<div class="Truncate">
<a href="#" class="Truncate-text Truncate-text--expandable">
JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap
</a>
<br>
<a href="#" class="Truncate-text Truncate-text--expandable">
Vue.js Laravel TypeScript Node.js Express.js NextJS TailwindCSS
</a>
<br>
<a href="#" class="Truncate-text Truncate-text--expandable">
React Native Flutter Firebase AWS Docker Kubernetes Git GitHub
</a>
</div>
</div>
</body>
</html>
A resizable box appears with truncated link text. When you hover over any link, the text expands to show the full content. The box can be resized horizontally by dragging from the corner.
Example: Expandable Div Elements
This example demonstrates truncation with div elements instead of anchor tags
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" />
</head>
<body>
<h1 style="margin: 10px">Primer CSS Truncate with Div Elements</h1>
<p style="margin: 15px">Truncated div text that expands on focus:</p>
<div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 15px; width: 250px;">
<div class="Truncate">
<div tabindex="0" class="Truncate-text Truncate-text--expandable">
Frontend Technologies: JavaScript Python CSS HTML C/C++ Angular React
</div>
<div tabindex="0" class="Truncate-text Truncate-text--expandable">
Backend Technologies: Node.js Express.js MongoDB SQL Django Laravel
</div>
<div tabindex="0" class="Truncate-text Truncate-text--expandable">
DevOps Tools: Docker Kubernetes AWS Firebase Git GitHub Actions
</div>
</div>
</div>
</body>
</html>
A resizable box with truncated div text appears. Each div has tabindex="0" making it focusable. When you hover or focus on any div, the text expands to show the complete content.
Conclusion
Primer CSS truncate classes provide an elegant solution for handling long text in limited space. The expandable feature enhances user experience by showing full content on demand while maintaining a clean, organized layout.
487 Views
