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 Custom Max Widths
In web development projects, developers face situations where they need to display text within a 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 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: Basic CSS Truncate
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 250px;
height: 30px;
border: 1px solid black;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 5px;
}
</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>
A bordered box displaying truncated text with ellipsis (...) at the end where the text overflows.
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/cssor 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: Primer CSS Custom Max Widths
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.
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. Then, we have displayed different truncated text with different maximum widths using the predefined class in Primer CSS.
<!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 Custom Max Width</h1>
<p style="margin: 10px">Following we have different truncated text with customized maximum widths.</p>
<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;">Max-width 460px: 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;">Max-width 340px: 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;">Max-width 280px: 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;">Max-width 180px: 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;">Max-width 80px: Apple mango banana watermelon orange kiwi pomegranate muskmelon pineapple grapes papaya guava strawberries raspberry avocado pear.</span>
</div>
</div>
</body>
</html>
A resizable box containing multiple lines of truncated text, each with different max-widths (460px, 340px, 280px, 180px, 80px). As the max-width decreases, more text gets truncated with ellipsis. The box can be resized horizontally to see how truncation adapts.
Conclusion
Customizing the maximum width of truncated text is essential for controlling content display within limited space. Primer CSS provides an elegant solution with its built-in truncate classes, making it easy to create responsive and user-friendly text layouts for cards, headlines, and descriptions.
222 Views
