UI text wrapping and LineBreakOn example (#7761)

# Objective

An example demonstrating more text layout options, text wrapping and
`LineBreakOn`.

<img width="961" alt="text_wrap"
src="https://user-images.githubusercontent.com/27962798/220125391-48163d28-51d9-4df5-b34a-f95ca3661b7d.PNG">

Won't look exactly like this on main because of the remaining bugs in
text.

---------

Co-authored-by: Alice Cecile <alice.i.cecile@gmail.com>

Cargo.toml

@@ -1832,6 +1832,16 @@ description = "Demonstrates how the AlignItems and JustifyContent properties can
 category = "UI (User Interface)"
 wasm = true
 
+[[example]]
+name = "text_wrap_debug"
+path = "examples/ui/text_wrap_debug.rs"
+
+[package.metadata.example.text_wrap_debug]
+name = "Text Wrap Debug"
+description = "Demonstrates text wrapping"
+category = "UI (User Interface)"
+wasm = true
+
 [[example]]
 name = "grid"
 path = "examples/ui/grid.rs"
@@ -1839,6 +1849,7 @@ path = "examples/ui/grid.rs"
 [package.metadata.example.grid]
 name = "CSS Grid"
 description = "An example for CSS Grid layout"
+
 category = "UI (User Interface)"
 wasm = true
 

examples/README.md

@@ -340,6 +340,7 @@ Example | Description
 [Relative Cursor Position](../examples/ui/relative_cursor_position.rs) | Showcases the RelativeCursorPosition component
 [Text](../examples/ui/text.rs) | Illustrates creating and updating text
 [Text Debug](../examples/ui/text_debug.rs) | An example for debugging text layout
+[Text Wrap Debug](../examples/ui/text_wrap_debug.rs) | Demonstrates text wrapping
 [Transparency UI](../examples/ui/transparency_ui.rs) | Demonstrates transparency for UI
 [UI](../examples/ui/ui.rs) | Illustrates various features of Bevy UI
 [UI Scaling](../examples/ui/ui_scaling.rs) | Illustrates how to scale the UI

examples/ui/text_wrap_debug.rs

@@ -0,0 +1,106 @@
+//! This example demonstrates text wrapping and use of the `LineBreakOn` property.
+
+use bevy::prelude::*;
+use bevy::text::BreakLineOn;
+use bevy::winit::WinitSettings;
+
+fn main() {
+    App::new()
+        .add_plugins(DefaultPlugins)
+        .insert_resource(WinitSettings::desktop_app())
+        .add_systems(Startup, spawn)
+        .run();
+}
+
+fn spawn(mut commands: Commands, asset_server: Res<AssetServer>) {
+    commands.spawn(Camera2dBundle::default());
+
+    let text_style = TextStyle {
+        font: asset_server.load("fonts/FiraSans-Bold.ttf"),
+        font_size: 14.0,
+        color: Color::WHITE,
+    };
+
+    let root = commands
+        .spawn(NodeBundle {
+            style: Style {
+                flex_direction: FlexDirection::Column,
+                size: Size::new(Val::Percent(100.), Val::Percent(100.)),
+                ..Default::default()
+            },
+            background_color: Color::BLACK.into(),
+            ..Default::default()
+        })
+        .id();
+
+    for linebreak_behavior in [BreakLineOn::AnyCharacter, BreakLineOn::WordBoundary] {
+        let row_id = commands
+            .spawn(NodeBundle {
+                style: Style {
+                    flex_direction: FlexDirection::Row,
+                    justify_content: JustifyContent::SpaceAround,
+                    align_items: AlignItems::Center,
+                    size: Size::new(Val::Percent(100.), Val::Percent(50.)),
+                    ..Default::default()
+                },
+                ..Default::default()
+            })
+            .id();
+
+        let justifications = vec![
+            JustifyContent::Center,
+            JustifyContent::FlexStart,
+            JustifyContent::FlexEnd,
+            JustifyContent::SpaceAround,
+            JustifyContent::SpaceBetween,
+            JustifyContent::SpaceEvenly,
+        ];
+
+        for (i, justification) in justifications.into_iter().enumerate() {
+            let c = 0.3 + i as f32 * 0.1;
+            let column_id = commands
+                .spawn(NodeBundle {
+                    style: Style {
+                        justify_content: justification,
+                        flex_direction: FlexDirection::Column,
+                        size: Size::new(Val::Percent(16.), Val::Percent(95.)),
+                        overflow: Overflow::clip(),
+                        ..Default::default()
+                    },
+                    background_color: Color::rgb(0.5, c, 1.0 - c).into(),
+                    ..Default::default()
+                })
+                .id();
+
+            let messages = [
+                format!("JustifyContent::{justification:?}"),
+                format!("LineBreakOn::{linebreak_behavior:?}"),
+                "Line 1\nLine 2\nLine 3".to_string(),
+                "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor, nunc ac faucibus fringilla.".to_string(),
+            ];
+
+            for (j, message) in messages.into_iter().enumerate() {
+                let text = Text {
+                    sections: vec![TextSection {
+                        value: message.clone(),
+                        style: text_style.clone(),
+                    }],
+                    alignment: TextAlignment::Left,
+                    linebreak_behavior,
+                };
+                let text_id = commands
+                    .spawn((
+                        TextBundle {
+                            text,
+                            ..Default::default()
+                        },
+                        BackgroundColor(Color::rgb(0.8 - j as f32 * 0.2, 0., 0.)),
+                    ))
+                    .id();
+                commands.entity(column_id).add_child(text_id);
+            }
+            commands.entity(row_id).add_child(column_id);
+        }
+        commands.entity(root).add_child(row_id);
+    }
+}