Text in Layout

A Text is sized by measuring its content: unwrapped, it is as wide as its longest line; with a wrap mode, its height is the number of lines its content wraps to at the width it gets. Content that doesn't fit is cut off at the edge of the Text's own box. Text wrapping compares the wrap modes themselves.

Wrapping inside a pane

A wrapping Text in a column is stretched to the column's width, and wraps to fit it, taking as many rows as it needs.

@component
def wrap_in_pane() -> Div:
    return Div(
        style=row,
        children=[
            Text(style=length(16) | border, content="length(16)"),
            Div(
                style=col | fill(1) | border | pad_x(1),
                children=[Text(style=text_wrap_stable, content=PARAGRAPH)],
            ),
        ],
    )

ScreenshotText

┌──────────────┐┌──────────────────────────────────────────┐
│length(16)    ││ The quick brown fox jumps over the lazy  │
│              ││ dog, and then naps in the afternoon sun. │
│              ││                                          │
│              ││                                          │
│              ││                                          │
└──────────────┘└──────────────────────────────────────────┘

Wrapping beside other text

Wrapping Texts side by side in a row shrink to share it, and each wraps to its share. A flex item can't shrink below its automatic minimum size, and a wrapping Text's is the width of its widest word, so neither needs anything set to give up the space its unwrapped line would take.

@component
def wrap_in_row() -> Div:
    return Div(
        style=row | gap(2) | border | border_heavy,
        children=[
            Text(style=text_wrap_stable | border, content=PARAGRAPH),
            Text(style=text_wrap_stable | border, content=PARAGRAPH),
        ],
    )

ScreenshotText

┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
┃┌──────────────────────────┐  ┌──────────────────────────┐┃
┃│The quick brown fox jumps │  │The quick brown fox jumps │┃
┃│over the lazy dog, and    │  │over the lazy dog, and    │┃
┃│then naps in the afternoon│  │then naps in the afternoon│┃
┃│sun.                      │  │sun.                      │┃
┃└──────────────────────────┘  └──────────────────────────┘┃
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛

Justification needs room

text_justify_center and text_justify_right align each line within the Text's own width. A Text stretched across its parent has room to move its lines, but one sized to its content, like the align_self_start one below, has none. With a wrap mode, each line is aligned separately.

@component
def justify() -> Div:
    return Div(
        style=col,
        children=[
            Text(style=text_justify_center | border, content="text_justify_center, stretched"),
            Text(
                style=text_justify_center | align_self_start | border,
                content="text_justify_center | align_self_start",
            ),
            Text(
                style=text_justify_center | text_wrap_balance | border,
                content="text_justify_center | text_wrap_balance centers each line of a paragraph "
                "within the width of the box",
            ),
        ],
    )

ScreenshotText

┌────────────────────────────────────────────────┐
│         text_justify_center, stretched         │
└────────────────────────────────────────────────┘
┌──────────────────────────────────────┐          
│text_justify_center | align_self_start│          
└──────────────────────────────────────┘          
┌────────────────────────────────────────────────┐
│     text_justify_center | text_wrap_balance    │
│     centers each line of a paragraph within    │
│              the width of the box              │
└────────────────────────────────────────────────┘

Long unwrapped text in a narrow pane

In a col, a Text is stretched to the column's width, however long its content, and the content is cut off at the Text's edge. In a row, a Text can't shrink below its content's width, so it overflows the row's border. Give it min_width(0) to keep it inside the row (see Content sets a minimum size), or a wrap mode to break its lines instead.

@component
def narrow() -> Div:
    return Div(
        style=row | gap(2),
        children=[
            Div(
                style=col | width(20) | border | border_heavy,
                children=[Text(style=border, content="unwrapped text in a col")],
            ),
            Div(
                style=row | width(20) | border | border_heavy,
                children=[Text(style=border, content="unwrapped text in a row")],
            ),
        ],
    )

ScreenshotText

┏━━━━━━━━━━━━━━━━━━┓  ┏━━━━━━━━━━━━━━━━━━┓      
┃┌────────────────┐┃  ┃┌───────────────────────┐
┃│unwrapped text i│┃  ┃│unwrapped text in a row│
┃└────────────────┘┃  ┃└───────────────────────┘
┗━━━━━━━━━━━━━━━━━━┛  ┗━━━━━━━━━━━━━━━━━━┛