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="overflow-hidden 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="overflow-hidden 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>
In the future we might add a
line-clamp-none
utility that is a bit more expressive, but we need to do some experimenting to determine the best implementation.
Utilities are for clamping text up to 6 lines are generated by default:
Aspect ratio classes up to 16 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: {
aspectRatio: ['responsive', 'hover']
}
}
[0.1.0] - 2021-01-06
Initial release!
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.