Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
@tailwindcss/line-clamp
Advanced tools
A plugin that provides utilities for visually truncating text after a fixed number of lines.
@tailwindcss/line-clamp is a Tailwind CSS plugin that provides utilities for visually truncating text after a fixed number of lines. This is particularly useful for creating clean and consistent layouts where text content needs to be limited to a certain number of lines.
Basic Line Clamping
This feature allows you to truncate text after a specified number of lines. In this example, the text will be truncated after 3 lines.
<div class="line-clamp-3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
Responsive Line Clamping
This feature allows you to apply different line clamping rules at different breakpoints. In this example, the text will be truncated after 2 lines on small screens, 4 lines on medium screens, and 6 lines on large screens.
<div class="line-clamp-2 md:line-clamp-4 lg:line-clamp-6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
clamp-js-main is a JavaScript library that provides similar functionality for clamping text after a specified number of lines. Unlike @tailwindcss/line-clamp, which is a CSS utility, clamp-js-main is a JavaScript solution that can be used with any CSS framework.
dotdotdot-js is another JavaScript library for truncating text. It offers more customization options compared to @tailwindcss/line-clamp, such as the ability to add custom ellipsis and handle different types of content. However, it requires JavaScript to function, whereas @tailwindcss/line-clamp is purely CSS-based.
A plugin that provides utilities for visually truncating text after a fixed number of lines.
Install the plugin from npm:
# Using npm
npm install @tailwindcss/line-clamp
# Using Yarn
yarn add @tailwindcss/line-clamp
Then add the plugin to your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/line-clamp'),
// ...
],
}
Use the line-clamp-{n}
utilities to specify how many lines of text should be visible before truncating::
<p class="line-clamp-3">
Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>
To remove any line-clamping, use line-clamp-none
:
<p class="line-clamp-3 md:line-clamp-none">
Et molestiae hic earum repellat aliquid est doloribus delectus. Enim illum odio porro ut omnis dolor debitis natus. Voluptas possimus deserunt sit delectus est saepe nihil. Qui voluptate possimus et quia. Eligendi voluptas voluptas dolor cum. Rerum est quos quos id ut molestiae fugit.
</p>
Note that the
line-clamp-{n}
set other properties likedisplay
andoverflow
in addition to-webkit-line-clamp
which are not unset byline-clamp-none
, so depending on what you are trying to achieve you may need to explicitly override those properties with utilities likeflex
oroverflow-visible
as well.
Utilities are for clamping text up to 6 lines are generated by default:
Class | CSS |
---|---|
line-clamp-1 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; |
line-clamp-2 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; |
line-clamp-3 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; |
line-clamp-4 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; |
line-clamp-5 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; |
line-clamp-6 | overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; |
line-clamp-none | -webkit-line-clamp: unset; |
You can configure which values and variants are generated by this plugin under the lineClamp
key in your tailwind.config.js
file:
// tailwind.config.js
module.exports = {
theme: {
extend: {
lineClamp: {
7: '7',
8: '8',
9: '9',
10: '10',
}
}
},
variants: {
lineClamp: ['responsive', 'hover']
}
}
FAQs
A plugin that provides utilities for visually truncating text after a fixed number of lines.
The npm package @tailwindcss/line-clamp receives a total of 331,316 weekly downloads. As such, @tailwindcss/line-clamp popularity was classified as popular.
We found that @tailwindcss/line-clamp demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.