Add an overflow_wrap field to the Style type ?

[Azales94500]

What problem does this solve or what need does it fill?

When we use a Text component and the value doesn't have a whitespace character near the max size (horizontally) it overflows the max size, the overflow also happens when we exceed the max size vertically (with or without whitespace character)

What solution would you like?

A field in the Style type like "flex_wrap" that can prevent this behavior

Additional context

Code with the problem on the y axis :

use bevy::{diagnostic::{
        EntityCountDiagnosticsPlugin, FrameTimeDiagnosticsPlugin, LogDiagnosticsPlugin
    }, prelude::*, ui::UiPlugin};

fn main() {
    App::build()
        .insert_resource(Msaa {samples : 4, ..Default::default()})
        .insert_resource(WindowDescriptor {
            width : 800.,
            height : 600.,
            title : "Just a game !".to_string(),
            resizable : false,
            vsync : true,
            ..Default::default()
        })
        .add_plugins(DefaultPlugins)
        // FOR DIAGNOSTICS AND LOGS PURPOSE, DON'T FORGET TO REMOVE THEM FOR PRODUCTION
        .add_plugin(LogDiagnosticsPlugin::default())
        .add_plugin(FrameTimeDiagnosticsPlugin::default())
        .add_plugin(EntityCountDiagnosticsPlugin::default())
        .add_plugin(UiPlugin::default())
        .add_startup_system(setup.system())
        .run();
}

fn setup(mut commands : Commands, mut materials : ResMut<Assets<ColorMaterial>>, 
    asset_server : Res<AssetServer>) {
    commands.spawn_bundle(OrthographicCameraBundle::new_2d());
    commands.spawn_bundle(UiCameraBundle::default());

    let handle_dialogs = materials.add(ColorMaterial::color(Color::DARK_GRAY));

    commands.spawn_bundle(
        NodeBundle {
            style: Style {
                position_type : PositionType::Absolute,
                size : Size::new(Val::Px(600.), Val::Px(150.)),
                display : Display::Flex,
                justify_content: JustifyContent::FlexStart,
                align_items : AlignItems::FlexEnd,
                position : Rect {
                    left : Val::Px(100.),
                    bottom : Val::Px(10.),
                    ..Default::default()
                },
                padding : Rect {
                    left : Val::Px(5.),
                    right : Val::Px(5.),
                    top : Val::Px(5.),
                    bottom : Val::Px(5.),
                },
                ..Default::default()
            },
            material : handle_dialogs.clone(),
            ..Default::default()
    }).with_children(|dialog_window| {
        dialog_window.spawn_bundle(TextBundle {
            style : Style {
                position_type : PositionType::Relative,
                max_size : Size::new(Val::Px(585.), Val::Px(145.)),
                ..Default::default()
            },
            text : Text {
                sections : vec![
                    TextSection {
                        value : "Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test Test test test test test test test test test test test".to_string(),
                        style : TextStyle {
                            font : asset_server.load("fonts/ARIAL.TTF"),
                            font_size : 20.,
                            color : Color::WHITE
                        }
                    },
                ],
                alignment : TextAlignment {
                    horizontal : HorizontalAlign::Left,
                    vertical : VerticalAlign::Top
                }
            },
            ..Default::default()
        });
    });
}

Result :

Code with the problem on the x axis :

                    // Just the value change so i didn't paste the rest of the code
                    TextSection {
                        value : "Tessssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssst".to_string(),

Result :

[nicopap]

I'm not sure I follow the issue.

What's the intended behavior here? Do you want the text to be clipped (in which case set the Style::overflow field) Or do you want another behavior. Which one?

[Azales94500]

I'm not sure I follow the issue.

What's the intended behavior here? Do you want the text to be clipped (in which case set the Style::overflow field) Or do you want another behavior. Which one?

This is an old issue, at the time there wasn't an overflow field on the Style type (and i misunderstood the purpose of flex_wrap property in CSS, it's not the solution to my problem, sorry about that and thank you for pointing me to the overflow property instead)

The overflow field with the Clip value is a valid way of fixing the problem of this issue, but that's not what i had in mind when i created it

I don't want the text to just be hidden on overflow, i want it to be wrapped, on the horizontal axis when overflowing it goes to next line and on vertical axis, have a way to "scroll" the text in order to see the rest of it (maybe with a scroll bar, maybe with an input) like we can do in CSS with the overflow: auto, or overflow: scroll property

i just tried it with bevy 0.11 and it seems to work on the horizontal axis with the linebreak_behavior field on the Text type, on the vertical axis though, i don't know how to make it works, i can clip it yes, but how to retrieve the rest of the text then ? Is there currently a way to know wich part of the text is not visible ? Or to "scroll" it ?

Should i close this issue ? Even if it's not quite what i wanted, there is now a fix to the overflowing problem

[nicopap]

Yes. There is three text wrapping modes and the overflow field. So I'm closing this issue.