Label Text Wrapping

This demo shows how to enable the text wrapping and trimming feature provided by the LabelStyle class. The options include wrapping at character or at word bounds, both with or without an ellipsis.

Aside from wrapping in rectangular shapes, the textWrappingShape property allows for wrapping in many more shapes like triangle, hexagon or ellipse. This can be combined with textWrappingPadding and padding to fine-tune the wrapping.

Things to Try

• Select and resize the nodes to see how the different wrapping types behave.
• New interactively added labels use word wrapping with ellipsis.
• Try the right to left text direction. This will rebuild the graph with Hebrew text labels.
• Switch between SVG and WebGL rendering and observe that the styles are automatically converted. Note that for WebGLLabelStyle, the textWrappingPadding and padding properties are numbers and not of type Insets, as the corresponding properties of LabelStyle are.

See the sources for details.