how to force word wrap in a gui label

[mami]

Hello, I have a gui label with a long caption. This is causing me a problem where instead of word-wrapping the caption text onto a new line, instead the entire gui frame is being stretched horizontally to fit the text on one long single line. It looks awful and I want to ask how do I get the label to wrap the caption instead? I could create two labels and manually wrap the text but this is very annoying and I've seen factorio's gui do word wrapping before.

For context here is the gui I am building using flib, the problem label is the one at the very bottom with name="radiolabel".

Code: Select all

local window = flib_gui.build(rootgui, {
	{type="frame", direction="vertical", ref={"main_window"}, name=COMBINATOR_NAME, children={
		--title bar
		{type="flow", ref={"titlebar"}, children={
			{type="label", style="frame_title", caption={"cybersyn-gui.combinator-title"}, elem_mods={ignored_by_interaction=true}},
			{type="empty-widget", style="flib_titlebar_drag_handle", elem_mods={ignored_by_interaction=true}},
			{type="sprite-button", style="frame_action_button", mouse_button_filter={"left"}, sprite="utility/close_white", hovered_sprite="utility/close_black", name=COMBINATOR_NAME, actions={
				on_click = {"close", comb.unit_number}
			}}
		}},
		{type="frame", style="inside_shallow_frame_with_padding", style_mods={padding=12}, children={
			{type="flow", direction="vertical", style_mods={horizontal_align="left"}, children={
				--status
				{type="flow", style="status_flow", direction="horizontal", style_mods={vertical_align="center", horizontally_stretchable=true, bottom_padding=4}, children={
					{type="sprite", sprite=STATUS_SPRITES[comb.status] or STATUS_SPRITES_DEFAULT, style="status_image", ref={"status_icon"}, style_mods={stretch_image_to_widget_size=true}},
					{type="label", caption={STATUS_NAMES[comb.status] or STATUS_NAMES_DEFAULT}, ref={"status_label"}}
				}},
				--preview
				{type="frame", style="deep_frame_in_shallow_frame", style_mods={minimal_width=0, horizontally_stretchable=true, padding=0}, children={
					{type="entity-preview", style="wide_entity_button", ref={"preview"}},
				}},
				--drop down
				{type="label", style="heading_3_label", caption={"cybersyn-gui.operation"}, style_mods={top_padding=8}},
				{type="drop-down", style_mods={top_padding=3}, ref={"operation"}, actions={
					on_selection_state_changed={"drop-down", comb.unit_number}
				}, selected_index=selected_index, items={
					{"cybersyn-gui.comb1"},
					{"cybersyn-gui.comb2"},
					{"cybersyn-gui.depot"},
					{"cybersyn-gui.wagon-manifest"},
				}},
				---choose-elem-button
				{type="line", style_mods={top_padding=10}},
				{type="label", name="network_label", style="heading_3_label", caption={"cybersyn-gui.network"}, style_mods={top_padding=7}},
				{type="flow", name="bottom", style_mods={vertical_align="center"}, direction="horizontal", children={
					{type="choose-elem-button", name="network", style="slot_button_in_shallow_frame", ref={"network"}, elem_type="signal", signal=control.first_signal, style_mods={bottom_margin=2, right_margin=6}, actions={
						on_elem_changed={"choose-elem-button", comb.unit_number}
					}},
					{type="checkbox", name="radiobutton", ref={"radiobutton"}, state=control.second_constant ~= 1, actions={
						on_checked_state_changed={"radiobutton", comb.unit_number}
					}},
					{type="label", name="radiolabel", ref={"radiolabel"}, caption={"cybersyn-gui.auto-description"}},
				}}
			}}
		}}
	}}
})

[DaveMcW]

If you make it a text-box you can set word-wrap = true.

To make it look like a label, you can also set selectable=false and read_only=true. And give it a custom style.

[Deadlock989]

Alternatively you can use a label but set single_line to false and set a maximal_width.

[mami]

setting a maximal_width and single_line worked for me, thank!