How do I control text wrapping?
Last updated
Last updated
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:
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.
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 |
---|---|
| Text wrapping will be turned off completely. |
| Shorthand for |
| Text will wrap at the first space it finds after |
| Text will only wrap at double-spaces. |
| Shorthand for |
| Text will wrap at the first space it finds after |
| Shorthand for |
| Text will clip and be replaced with an ellipsis after |