Add line-clamp utilities from @tailwindcss/line-clamp to core (#10768)

* add `lineClamp` utility

This is coming from the `@tailwindcss/line-clamp` package that we now
merged into the core of Tailwind itself.

* update changelog

Author: RobinMalfait

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
 

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' },

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',

tests/kitchen-sink.test.js

@@ -7,6 +7,9 @@ crosscheck(({ stable, oxide }) => {
       content: [
         {
           raw: html`
+            <div
+              class="line-clamp-2 line-clamp-[33] line-clamp-[var(--line-clamp-variable)] line-clamp-none"
+            ></div>
             <div class="range:text-right multi:text-left"></div>
             <div
               class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
@@ -432,6 +435,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;
@@ -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;