gpui: Add line_clamp to truncate text after a specified number of lines (#23058)

Release Notes:

- N/A

Add this feature for some case we need keep 2 or 3 lines, but truncate.
For example the blog post summary.

- Added `line_clamp` method.
    Ref: https://tailwindcss.com/docs/line-clamp


## Break changes:

- Renamed `gpui::Truncate` to `gpui::TextOverflow` to match
[CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow).
- Update `truncate` style method to match [Tailwind
CSS](https://tailwindcss.com/docs/text-overflow) behavior:

    ```css
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    ```
<img width="538" alt="image"
src="https://github.com/user-attachments/assets/c69c4213-eac9-4087-9daa-ce7afe18c758"
/>


## Show case

<img width="816" alt="image"
src="https://github.com/user-attachments/assets/e0660290-8042-4954-b93c-c729d609484a"
/>

![CleanShot 2025-01-13 at 17 22
05](https://github.com/user-attachments/assets/38644892-79fe-4254-af9e-88c1349561bd)

## Describe changes

The [second
commit](6b41c2772f)
for make sure text layout to match with the line clamp. Before this
change, they may wrap many lines in sometimes. And I also make
line_clamp default to 1 if we used `truncate` to ensure no wrap.

> TODO: There is still a tiny detail that is not easy to fix. This
problem only occurs in the case of certain long words. I will think
about how to improve it later. At present, this has some flaws but does
not affect the use.

crates/gpui/src/styled.rs

@@ -1,9 +1,9 @@
+use crate::TextStyleRefinement;
 use crate::{
     self as gpui, px, relative, rems, AbsoluteLength, AlignItems, CursorStyle, DefiniteLength,
     Fill, FlexDirection, FlexWrap, Font, FontStyle, FontWeight, Hsla, JustifyContent, Length,
-    SharedString, StrikethroughStyle, StyleRefinement, WhiteSpace,
+    SharedString, StrikethroughStyle, StyleRefinement, TextOverflow, WhiteSpace,
 };
-use crate::{TextStyleRefinement, Truncate};
 pub use gpui_macros::{
     border_style_methods, box_shadow_style_methods, cursor_style_methods, margin_style_methods,
     overflow_style_methods, padding_style_methods, position_style_methods,
@@ -11,6 +11,8 @@ pub use gpui_macros::{
 };
 use taffy::style::{AlignContent, Display};
 
+const ELLIPSIS: &str = "…";
+
 /// A trait for elements that can be styled.
 /// Use this to opt-in to a utility CSS-like styling API.
 pub trait Styled: Sized {
@@ -64,19 +66,32 @@ pub trait Styled: Sized {
     fn text_ellipsis(mut self) -> Self {
         self.text_style()
             .get_or_insert_with(Default::default)
-            .truncate = Some(Truncate::Ellipsis);
+            .text_overflow = Some(TextOverflow::Ellipsis(ELLIPSIS));
         self
     }
 
-    /// Sets the truncate overflowing text.
-    /// [Docs](https://tailwindcss.com/docs/text-overflow#truncate)
-    fn truncate(mut self) -> Self {
+    /// Sets the text overflow behavior of the element.
+    fn text_overflow(mut self, overflow: TextOverflow) -> Self {
         self.text_style()
             .get_or_insert_with(Default::default)
-            .truncate = Some(Truncate::Truncate);
+            .text_overflow = Some(overflow);
         self
     }
 
+    /// Sets the truncate to prevent text from wrapping and truncate overflowing text with an ellipsis (…) if needed.
+    /// [Docs](https://tailwindcss.com/docs/text-overflow#truncate)
+    fn truncate(mut self) -> Self {
+        self.overflow_hidden().whitespace_nowrap().text_ellipsis()
+    }
+
+    /// Sets number of lines to show before truncating the text.
+    /// [Docs](https://tailwindcss.com/docs/line-clamp)
+    fn line_clamp(mut self, lines: usize) -> Self {
+        let mut text_style = self.text_style().get_or_insert_with(Default::default);
+        text_style.line_clamp = Some(lines);
+        self.overflow_hidden()
+    }
+
     /// Sets the flex direction of the element to `column`.
     /// [Docs](https://tailwindcss.com/docs/flex-direction#column)
     fn flex_col(mut self) -> Self {