* Add ellipsis and no-ellipsis utilities

Co-authored-by: Benoît Rouleau <benoit.rouleau@icloud.com>
tailwindlabs · Oct 14, 2020 · ba3d4aa · ba3d4aa
1 parent ae1b3f5
commit ba3d4aa
Show file tree

Hide file tree

Showing 9 changed files with 222 additions and 0 deletions.
diff --git a/__tests__/fixtures/tailwind-output-flagged.css b/__tests__/fixtures/tailwind-output-flagged.css
@@ -38562,6 +38562,14 @@ video {
   --text-opacity: 1;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
 .italic {
   font-style: italic;
 }
@@ -82549,6 +82557,14 @@ video {
     --text-opacity: 1;
   }
 
+  .sm\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .sm\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .sm\:italic {
     font-style: italic;
   }
@@ -126506,6 +126522,14 @@ video {
     --text-opacity: 1;
   }
 
+  .md\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .md\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .md\:italic {
     font-style: italic;
   }
@@ -170463,6 +170487,14 @@ video {
     --text-opacity: 1;
   }
 
+  .lg\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .lg\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .lg\:italic {
     font-style: italic;
   }
@@ -214420,6 +214452,14 @@ video {
     --text-opacity: 1;
   }
 
+  .xl\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .xl\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .xl\:italic {
     font-style: italic;
   }
@@ -258377,6 +258417,14 @@ video {
     --text-opacity: 1;
   }
 
+  .\32xl\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .\32xl\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .\32xl\:italic {
     font-style: italic;
   }

diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css
@@ -8991,6 +8991,14 @@ video {
   color: #702459;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
 .italic {
   font-style: italic;
 }
@@ -19821,6 +19829,14 @@ video {
     color: #702459;
   }
 
+  .sm\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .sm\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .sm\:italic {
     font-style: italic;
   }
@@ -30621,6 +30637,14 @@ video {
     color: #702459;
   }
 
+  .md\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .md\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .md\:italic {
     font-style: italic;
   }
@@ -41421,6 +41445,14 @@ video {
     color: #702459;
   }
 
+  .lg\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .lg\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .lg\:italic {
     font-style: italic;
   }
@@ -52221,6 +52253,14 @@ video {
     color: #702459;
   }
 
+  .xl\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .xl\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .xl\:italic {
     font-style: italic;
   }

diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css
@@ -15827,6 +15827,14 @@ video {
   --text-opacity: 1 !important;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis !important;
+}
+
+.overflow-clip {
+  text-overflow: clip !important;
+}
+
 .italic {
   font-style: italic !important;
 }
@@ -34450,6 +34458,14 @@ video {
     --text-opacity: 1 !important;
   }
 
+  .sm\:overflow-ellipsis {
+    text-overflow: ellipsis !important;
+  }
+
+  .sm\:overflow-clip {
+    text-overflow: clip !important;
+  }
+
   .sm\:italic {
     font-style: italic !important;
   }
@@ -53043,6 +53059,14 @@ video {
     --text-opacity: 1 !important;
   }
 
+  .md\:overflow-ellipsis {
+    text-overflow: ellipsis !important;
+  }
+
+  .md\:overflow-clip {
+    text-overflow: clip !important;
+  }
+
   .md\:italic {
     font-style: italic !important;
   }
@@ -71636,6 +71660,14 @@ video {
     --text-opacity: 1 !important;
   }
 
+  .lg\:overflow-ellipsis {
+    text-overflow: ellipsis !important;
+  }
+
+  .lg\:overflow-clip {
+    text-overflow: clip !important;
+  }
+
   .lg\:italic {
     font-style: italic !important;
   }
@@ -90229,6 +90261,14 @@ video {
     --text-opacity: 1 !important;
   }
 
+  .xl\:overflow-ellipsis {
+    text-overflow: ellipsis !important;
+  }
+
+  .xl\:overflow-clip {
+    text-overflow: clip !important;
+  }
+
   .xl\:italic {
     font-style: italic !important;
   }

diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css
@@ -13379,6 +13379,14 @@ video {
   color: #702459;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
 .italic {
   font-style: italic;
 }
@@ -29554,6 +29562,14 @@ video {
     color: #702459;
   }
 
+  .sm\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .sm\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .sm\:italic {
     font-style: italic;
   }
@@ -45699,6 +45715,14 @@ video {
     color: #702459;
   }
 
+  .md\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .md\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .md\:italic {
     font-style: italic;
   }
@@ -61844,6 +61868,14 @@ video {
     color: #702459;
   }
 
+  .lg\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .lg\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .lg\:italic {
     font-style: italic;
   }
@@ -77989,6 +78021,14 @@ video {
     color: #702459;
   }
 
+  .xl\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .xl\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .xl\:italic {
     font-style: italic;
   }

diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css
@@ -15827,6 +15827,14 @@ video {
   --text-opacity: 1;
 }
 
+.overflow-ellipsis {
+  text-overflow: ellipsis;
+}
+
+.overflow-clip {
+  text-overflow: clip;
+}
+
 .italic {
   font-style: italic;
 }
@@ -34450,6 +34458,14 @@ video {
     --text-opacity: 1;
   }
 
+  .sm\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .sm\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .sm\:italic {
     font-style: italic;
   }
@@ -53043,6 +53059,14 @@ video {
     --text-opacity: 1;
   }
 
+  .md\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .md\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .md\:italic {
     font-style: italic;
   }
@@ -71636,6 +71660,14 @@ video {
     --text-opacity: 1;
   }
 
+  .lg\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .lg\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .lg\:italic {
     font-style: italic;
   }
@@ -90229,6 +90261,14 @@ video {
     --text-opacity: 1;
   }
 
+  .xl\:overflow-ellipsis {
+    text-overflow: ellipsis;
+  }
+
+  .xl\:overflow-clip {
+    text-overflow: clip;
+  }
+
   .xl\:italic {
     font-style: italic;
   }

diff --git a/src/corePluginList.js b/src/corePluginList.js
@@ -76,6 +76,7 @@ export const corePluginList = [
   'textAlign',
   'textColor',
   'textOpacity',
+  'textOverflow',
   'fontStyle',
   'textTransform',
   'textDecoration',