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 Custom Max Widths
In web development projects, developers face situations where they need to display the text within specified amount of space due to several reasons like client’s demand, overall appearance, limited resources etc., The truncate property is an efficient feature in CSS which resolves this issue.
It enables the developers to display a single line text and truncate the overflowed text with an ellipsis. However, depending upon the situation the need of customizing the maximum width of the truncated text might arise. In this article, we will discuss how we can customize the maximum width using Primer CSS, a popular open-source CSS framework designed by GitHub design system.
What Does Truncate Mean?
In web designing, truncate is one of the values for text-overflow property of CSS. While dealing with text, it is common to come across situation where the container is not enough for the text to fit in. This text is known as overflowing text. It enables us to display a single line of text and then truncate the rest of it with an ellipsis.
In CSS, in order to use “truncate”, you have to do the following steps −
Set “white-space” property to nowrap
Set overflow property to hidden
Set text-overflow property to ellipsis
Example
<html>
<head>
<style>
div {
width: 77%;
height: 30px;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </div>
</body>
</html>
To avoid so many lines of code, you can use Primer CSS instead. Primer CSS has a truncate component inbuilt in it. It has pre-defined classes for the same.
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" />
Customize Max Width of Truncated Text
To customize the maximum width of the truncated text, Primer CSS offers predefined classes used to truncate your overflowing text in the website.
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.
Then, we have displayed different truncated text with different maximum widths using the predefined class in Primer CSS.
<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 Custom Max Width </h1>
<p style="margin: 10px"> Following we have different truncated text with customized maximum widths. </p>
<br>
<div class="Box p-1" style="resize: horizontal; overflow: scroll; margin: 10px">
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 460px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
<br>
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 340px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
<br>
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 280px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
<br>
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 180px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
<br>
<div class="Truncate">
<span class="Truncate-text Truncate-text--expandable" style="max-width: 80px;"> This is the text. Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear. </span>
</div>
</div>
</body>
</html>
Conclusion
Customizing the maximum width of the displayed text in case of overflowing content is a good practice which helps the developers to control the display of text within limited amount of space on a website. Following the method discussed in this article, you’ll be able to create visually appealing websites. We can also use the truncate method in card designing. This makes your content more readable and user-friendly while you have to display long titles, headlines, card descriptions etc.,
67 Views
