diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f8dce96de86..739ccfd1fd57 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add `caption-side` utilities ([#10470](https://github.com/tailwindlabs/tailwindcss/pull/10470)) - Add `justify-normal` and `justify-stretch` utilities ([#10560](https://github.com/tailwindlabs/tailwindcss/pull/10560)) - Add `content-normal` and `content-stretch` utilities ([#10645](https://github.com/tailwindlabs/tailwindcss/pull/10645)) +- Add `line-clamp` utilities from `@tailwindcss/line-clamp` to core ([#10768](https://github.com/tailwindlabs/tailwindcss/pull/10768)) ### Fixed diff --git a/src/corePlugins.js b/src/corePlugins.js index 717c9ec5c350..147bd8b0119b 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -703,6 +703,24 @@ export let corePlugins = { }) }, + lineClamp: ({ matchUtilities, addUtilities, theme }) => { + matchUtilities( + { + 'line-clamp': (value) => ({ + overflow: 'hidden', + display: '-webkit-box', + '-webkit-box-orient': 'vertical', + '-webkit-line-clamp': `${value}`, + }), + }, + { values: theme('lineClamp') } + ) + + addUtilities({ + '.line-clamp-none': { '-webkit-line-clamp': 'unset' }, + }) + }, + display: ({ addUtilities }) => { addUtilities({ '.block': { display: 'block' }, diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index 75ebb7c01cfb..b29eb4cf479d 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -582,6 +582,14 @@ module.exports = { auto: 'auto', ...theme('spacing'), }), + lineClamp: { + 1: '1', + 2: '2', + 3: '3', + 4: '4', + 5: '5', + 6: '6', + }, maxHeight: ({ theme }) => ({ ...theme('spacing'), none: 'none', diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js index a421e3a0b374..a1425b2d75a3 100644 --- a/tests/kitchen-sink.test.js +++ b/tests/kitchen-sink.test.js @@ -7,6 +7,9 @@ crosscheck(({ stable, oxide }) => { content: [ { raw: html` +
{ .mt-6 { margin-top: 1.5rem; } + .line-clamp-2 { + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + } + .line-clamp-\[33\] { + -webkit-line-clamp: 33; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + } + .line-clamp-\[var\(--line-clamp-variable\)\] { + -webkit-line-clamp: var(--line-clamp-variable); + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + } + .line-clamp-none { + -webkit-line-clamp: unset; + } .scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5; @@ -976,6 +1000,27 @@ crosscheck(({ stable, oxide }) => { .mt-6 { margin-top: 1.5rem; } + .line-clamp-2 { + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + } + .line-clamp-\[33\] { + -webkit-line-clamp: 33; + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + } + .line-clamp-\[var\(--line-clamp-variable\)\] { + -webkit-line-clamp: var(--line-clamp-variable); + -webkit-box-orient: vertical; + display: -webkit-box; + overflow: hidden; + } + .line-clamp-none { + -webkit-line-clamp: unset; + } .scale-50 { --tw-scale-x: 0.5; --tw-scale-y: 0.5;