How do I control text wrapping?

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.

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:

element with unusually long label

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".

element with unusually long label broken up using double-spaces

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.

edit this page

results matching ""

    powered by

    No results matching ""