Reset all properties when using line-clamp-none (#10876)

* reset other properties on `line-clamp-none` * update CHANGELOG
tailwindlabs · Mar 27, 2023 · 5b77b42 · 5b77b42
1 parent 71035b7
commit 5b77b42
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -18,7 +18,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))
+- Add `line-clamp` utilities from `@tailwindcss/line-clamp` to core ([#10768](https://github.com/tailwindlabs/tailwindcss/pull/10768), [#10876](https://github.com/tailwindlabs/tailwindcss/pull/10876))
 - Support ESM and TypeScript config files ([#10785](https://github.com/tailwindlabs/tailwindcss/pull/10785))
 - Add `list-style-image` utilities ([#10817](https://github.com/tailwindlabs/tailwindcss/pull/10817))
 - Use `:is` to make important selector option insensitive to DOM order ([#10835](https://github.com/tailwindlabs/tailwindcss/pull/10835))

diff --git a/src/corePlugins.js b/src/corePlugins.js
@@ -717,7 +717,12 @@ export let corePlugins = {
     )
 
     addUtilities({
-      '.line-clamp-none': { '-webkit-line-clamp': 'unset' },
+      '.line-clamp-none': {
+        overflow: 'visible',
+        display: 'block',
+        '-webkit-box-orient': 'horizontal',
+        '-webkit-line-clamp': 'none',
+      },
     })
   },
 

diff --git a/tests/kitchen-sink.test.js b/tests/kitchen-sink.test.js
@@ -454,7 +454,10 @@ crosscheck(({ stable, oxide }) => {
           overflow: hidden;
         }
         .line-clamp-none {
-          -webkit-line-clamp: unset;
+          -webkit-line-clamp: none;
+          -webkit-box-orient: horizontal;
+          display: block;
+          overflow: visible;
         }
         .scale-50 {
           --tw-scale-x: 0.5;
@@ -1019,7 +1022,10 @@ crosscheck(({ stable, oxide }) => {
           overflow: hidden;
         }
         .line-clamp-none {
-          -webkit-line-clamp: unset;
+          -webkit-line-clamp: none;
+          -webkit-box-orient: horizontal;
+          display: block;
+          overflow: visible;
         }
         .scale-50 {
           --tw-scale-x: 0.5;