Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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.
Primer CSS
Primer CSS is a powerful open-source CSS framework which enables developers to create consistent and professional front-end for web applications and websites. It is designed by GitHub design system. It offers a versatile set of in-built components, such as typography, buttons, alerts, truncate, menu, navigation etc., It is easy to use and saves a lot of time. Also, it has elaborate documentation for beginners to get started any time. It has predefined classes for truncating the overflowing text in the webpage.
Before using any of the classes in Primer CSS, we must install it from npm −
npm install --save @primer/css
or use the CDN link in the HTML code −
<link href= "https://unpkg.com/@primer/css@^20.2.4/dist/primer.css" rel= "stylesheet" />
Truncate Expand on Hover or Focus State
To expand your truncated text while it is in hover or focus state, Primer CSS has inbuilt classes. These classes are as follows −
Truncate-text − It is used to truncate any text
Truncate-text--expandable − It is used to expand the truncated text on hovering or focusing it.
Example
In this example, we have converted a div element into a resizable box using the predefined box class. Here, p-1 is a class shorthand for adding a padding of 4px (0.25 rem) on all sides of the box.
Next, we have the style attribute which is used to add desired styles to the box. We have set the value for resize property as horizontal so that the users can resize the box horizontally by simply dragging it from the right corner. To add a horizontal scrollbar to the element, we have used the “overflow: scroll” property. Using a horizontal scrollbar will enable the users to see the hidden content while horizontally scrolling over the text.
Next, we have created an element which contains anchor tags that will be truncated to fit inside the box. The Truncate-text is the class which is defined for truncating the text within the anchor tag, while Truncate-text--expandable class is built-in to enable the users to expand the truncated text whenever it is hovered on or in focused state.
<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 or focus state </h1>
<p style="margin: 10px"> Following we have different truncated text which expands on hovering. </p>
<br>
<div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
<div class="Truncate">
<a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailwind NextJs Typescript Java ExpressJs Vue.Js Laravel </a>
<a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
<a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
<a href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django Bootstrap Tailswind NextJs Typescript Java ExpressJs VueJs Laravel </a>
</div>
</div>
</body>
</html>
Example
In this example, we have added truncated text which is expandable on being hovered or focused within a div element.
<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 or focus state </h1>
<p style="margin: 15px"> Following we have different truncated text which expands on hovering. </p>
<br>
<div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 15px">
<div class="Truncate">
<div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
<div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
<div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
<div href="#" class="Truncate-text Truncate-text--expandable"> This is the text. JavaScript Python CSS HTML C/C++ Angular React MongoDB SQL Django </div>
</div>
</div>
</body>
</html>
Conclusion
In this article, we have learnt about how display our text properly and in a visually appealing manner even if we have limited amount of space. We make use of truncation method which can be easily done using the Primer CSS. Also, creating expandable truncated text will allow the users to access the information as and when needed while without compromising the overall look of the website. This makes your website user friendly and professional.
299 Views
