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/examples/text_wrapper.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    div, prelude::*, px, size, App, Application, Bounds, Context, Window, WindowBounds,
-    WindowOptions,
+    div, prelude::*, px, size, App, Application, Bounds, Context, TextOverflow, Window,
+    WindowBounds, WindowOptions,
 };
 
 struct HelloWorld {}
@@ -20,6 +20,7 @@ impl Render for HelloWorld {
                 div()
                     .flex()
                     .flex_row()
+                    .flex_shrink_0()
                     .gap_2()
                     .child(
                         div()
@@ -49,29 +50,53 @@ impl Render for HelloWorld {
             )
             .child(
                 div()
+                    .flex_shrink_0()
                     .text_xl()
-                    .overflow_hidden()
-                    .text_ellipsis()
+                    .truncate()
                     .border_1()
-                    .border_color(gpui::red())
+                    .border_color(gpui::blue())
                     .child("ELLIPSIS: ".to_owned() + text),
             )
             .child(
                 div()
+                    .flex_shrink_0()
                     .text_xl()
                     .overflow_hidden()
-                    .truncate()
+                    .text_ellipsis()
+                    .line_clamp(2)
+                    .border_1()
+                    .border_color(gpui::blue())
+                    .child("ELLIPSIS 2 lines: ".to_owned() + text),
+            )
+            .child(
+                div()
+                    .flex_shrink_0()
+                    .text_xl()
+                    .overflow_hidden()
+                    .text_overflow(TextOverflow::Ellipsis(""))
                     .border_1()
                     .border_color(gpui::green())
                     .child("TRUNCATE: ".to_owned() + text),
             )
             .child(
                 div()
+                    .flex_shrink_0()
+                    .text_xl()
+                    .overflow_hidden()
+                    .text_overflow(TextOverflow::Ellipsis(""))
+                    .line_clamp(3)
+                    .border_1()
+                    .border_color(gpui::green())
+                    .child("TRUNCATE 3 lines: ".to_owned() + text),
+            )
+            .child(
+                div()
+                    .flex_shrink_0()
                     .text_xl()
                     .whitespace_nowrap()
                     .overflow_hidden()
                     .border_1()
-                    .border_color(gpui::blue())
+                    .border_color(gpui::black())
                     .child("NOWRAP: ".to_owned() + text),
             )
             .child(div().text_xl().w_full().child(text))
@@ -80,7 +105,7 @@ impl Render for HelloWorld {
 
 fn main() {
     Application::new().run(|cx: &mut App| {
-        let bounds = Bounds::centered(None, size(px(600.0), px(480.0)), cx);
+        let bounds = Bounds::centered(None, size(px(800.0), px(600.0)), cx);
         cx.open_window(
             WindowOptions {
                 window_bounds: Some(WindowBounds::Windowed(bounds)),
@@ -89,5 +114,6 @@ fn main() {
             |_, cx| cx.new(|_| HelloWorld {}),
         )
         .unwrap();
+        cx.activate(true);
     });
 }