text ellipsis css

The text ellipsis feature in CSS is used to truncate text and add an ellipsis […] when the text overflows its container or specific width.
1) Text Ellipsis Css For Single-line
To apply an ellipsis to a single line of text you can use this style: 
.ellipsis {
   white-space: nowrap;      
   overflow: hidden;         
   text-overflow: ellipsis;  
   width: 200px;         
}
Output:
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
2) Multi-line Ellipsis
For truncating text to multiple lines, use the -webkit-line-clamp property along with display: -webkit-box. 
.multiline-ellipsis {
  display: -webkit-box;    
  -webkit-box-orient: vertical; 
  overflow: hidden;     
  -webkit-line-clamp: 3;   
}
Output:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
1. display: -webkit-box;
  • This is a WebKit-specific value for the display property.
  • It enables a flexible box layout (similar to flexbox) in WebKit browsers.
  • It allows text or content to behave like a flexible container and makes the multi-line ellipsis feature possible.
2. webkit-box-orient: vertical;
  • Specifies the orientation of the -webkit-box.
  • vertical orientation stacks content (like text) vertically.
  • Without this property, the text won’t respect the line clamping.
3. overflow: hidden;
  • Hides any content that exceeds the container’s visible area.
  • This is essential for truncating the text and ensuring the ellipsis is applied correctly.
4. -webkit-line-clamp: 3;
  • Limits the text to a specific number of lines (in this case, 3).
  • When the content exceeds this line limit, it gets truncated, and an ellipsis (…) appears at the end.
  • This property only works when display: -webkit-box and -webkit-box-orient: vertical are applied.