how-do-i-control-text-wrapping.md

How do I control text wrapping?

{% hint style="warn" %} It's not possible to control text-wrapping when you're using the SNA template, or any view that has "fast" quality or uses the WebGL renderer. {% endhint %}

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.

Value	Effect on text overflow
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.