Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@tailwindcss/line-clamp
Advanced tools
Readme
A plugin that provides utilities for visually truncating text after a fixed number of lines.
Install the plugin from npm:
npm install -D @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 429,682 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.