Add support for text-wrap property (#11320)

Update changelog

Co-authored-by: Adam Wathan <[email protected]>

Author: adamwathan

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 - Add `svh`, `lvh`, and `dvh` values to default `height`/`min-height`/`max-height` theme ([#11317](https://github.com/tailwindlabs/tailwindcss/pull/11317))
 - Add `has-*` variants for `:has(...)` pseudo-class ([#11318](https://github.com/tailwindlabs/tailwindcss/pull/11318))
+- Add `text-wrap` utilities including `text-balance` ([#11320](https://github.com/tailwindlabs/tailwindcss/pull/11320))
 
 ## [3.3.7] - 2023-12-18
 

src/corePlugins.js

@@ -1529,6 +1529,14 @@ export let corePlugins = {
     })
   },
 
+  textWrap: ({ addUtilities }) => {
+    addUtilities({
+      '.text-wrap': { 'text-wrap': 'wrap' },
+      '.text-nowrap': { 'text-wrap': 'nowrap' },
+      '.text-balance': { 'text-wrap': 'balance' },
+    })
+  },
+
   wordBreak: ({ addUtilities }) => {
     addUtilities({
       '.break-normal': { 'overflow-wrap': 'normal', 'word-break': 'normal' },

tests/basic-usage.oxide.test.css

@@ -593,6 +593,15 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-wrap {
+  text-wrap: wrap;
+}
+.text-nowrap {
+  text-wrap: nowrap;
+}
+.text-balance {
+  text-wrap: balance;
+}
 .break-words {
   overflow-wrap: break-word;
 }

tests/basic-usage.test.css

@@ -597,6 +597,15 @@
 .whitespace-nowrap {
   white-space: nowrap;
 }
+.text-wrap {
+  text-wrap: wrap;
+}
+.text-nowrap {
+  text-wrap: nowrap;
+}
+.text-balance {
+  text-wrap: balance;
+}
 .break-words {
   overflow-wrap: break-word;
 }

tests/basic-usage.test.js

@@ -193,6 +193,7 @@ crosscheck(({ stable, oxide, engine }) => {
             <div class="invisible"></div>
             <div class="collapse"></div>
             <div class="whitespace-nowrap"></div>
+            <div class="text-wrap text-balance text-nowrap"></div>
             <div class="w-12"></div>
             <div class="break-words"></div>
             <div class="z-30"></div>