How do I control text wrapping?
When you want to fit text inside of an element, or just make sure that labels underneath elements aren't too wide, you can customize your text-wrapping.
As long as you aren't using the SNA template, "fast" quality, or the WebGL renderer, you can force a line break in the label of an element, connection, or loop by adding a double-space inside the label.
Here's a screenshot of an element before adding any double-spaces:

And here's a screenshot of that same element, with a double-space between the words "with" and "an", and with a double-space between the words "unusually" and "long".

For a solution that's a bit more automated, and doesn't require you to open each profile and tinker with double-spaces in every label, you can use the text-overflow
property in the Advanced Editor. You can use text-overflow
inside of @settings
, or inside of a block that starts with any selector.
@settings {
text-overflow: auto 20;
}
element {
text-overflow: wrap 10;
}
The table below has a description of all the possible values you can use for the text-overflow
property, and what the effect of each one is.
off
Text wrapping will be turned off completely.
auto
Shorthand for auto 20
(see auto [number]
explanation).
auto [number]
Text will wrap at the first space it finds after [number]
characters (e.g. 10
characters if you specify auto 10
). If you add a double-space anywhere in the label, the entire label will only wrap at double-spaces.
manual
Text will only wrap at double-spaces.
wrap
Shorthand for wrap 20
(see wrap [number]
explanation).
wrap [number]
Text will wrap at the first space it finds after [number]
characters (e.g. 10
characters if you specify wrap 10
). Double-spaces will be ignored and will nor force text to wrap.
clip
Shorthand for clip 20
(see clip [number]
explanation).
clip [number]
Text will clip and be replaced with an ellipsis after [number]
characters (e.g. 10
characters if you specify clip 10
). Text will never wrap.
Last updated
Was this helpful?