706f7be5e7
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"
/>
## 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.
119 lines
4.2 KiB
Rust
119 lines
4.2 KiB
Rust
use gpui::{
|
|
div, prelude::*, px, size, App, Application, Bounds, Context, TextOverflow, Window,
|
|
WindowBounds, WindowOptions,
|
|
};
|
|
|
|
struct HelloWorld {}
|
|
|
|
impl Render for HelloWorld {
|
|
fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
|
|
let text = "The longest word 你好世界这段是中文，こんにちはこの段落は日本語です in any of the major English language dictionaries is pneumonoultramicroscopicsilicovolcanoconiosis, a word that refers to a lung disease contracted from the inhalation of very fine silica particles, specifically from a volcano; medically, it is the same as silicosis.";
|
|
div()
|
|
.id("page")
|
|
.size_full()
|
|
.flex()
|
|
.flex_col()
|
|
.p_2()
|
|
.gap_2()
|
|
.bg(gpui::white())
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.flex_row()
|
|
.flex_shrink_0()
|
|
.gap_2()
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.border_1()
|
|
.border_color(gpui::red())
|
|
.text_ellipsis()
|
|
.child("longer text in flex 1"),
|
|
)
|
|
.child(
|
|
div()
|
|
.flex()
|
|
.border_1()
|
|
.border_color(gpui::red())
|
|
.text_ellipsis()
|
|
.child("short flex"),
|
|
)
|
|
.child(
|
|
div()
|
|
.overflow_hidden()
|
|
.border_1()
|
|
.border_color(gpui::red())
|
|
.text_ellipsis()
|
|
.w_full()
|
|
.child("A short text in normal div"),
|
|
),
|
|
)
|
|
.child(
|
|
div()
|
|
.flex_shrink_0()
|
|
.text_xl()
|
|
.truncate()
|
|
.border_1()
|
|
.border_color(gpui::blue())
|
|
.child("ELLIPSIS: ".to_owned() + text),
|
|
)
|
|
.child(
|
|
div()
|
|
.flex_shrink_0()
|
|
.text_xl()
|
|
.overflow_hidden()
|
|
.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::black())
|
|
.child("NOWRAP: ".to_owned() + text),
|
|
)
|
|
.child(div().text_xl().w_full().child(text))
|
|
}
|
|
}
|
|
|
|
fn main() {
|
|
Application::new().run(|cx: &mut App| {
|
|
let bounds = Bounds::centered(None, size(px(800.0), px(600.0)), cx);
|
|
cx.open_window(
|
|
WindowOptions {
|
|
window_bounds: Some(WindowBounds::Windowed(bounds)),
|
|
..Default::default()
|
|
},
|
|
|_, cx| cx.new(|_| HelloWorld {}),
|
|
)
|
|
.unwrap();
|
|
cx.activate(true);
|
|
});
|
|
}
|