How do I force text to wrap based on the bounds of its parents?

Unity Engine
, ,
1

8749443--1185312--upload_2023-1-22_16-33-23.png
8749443--1185312--upload_2023-1-22_16-33-23.png1020×379 54.8 KB

Quick summary here: I’ve got a “flex-direction:row” box containing the image an the text. The box containing the text is “flex-direction:column” containing separate labels for each paragraph. The image size is fixed; Id like the box containing the text to grow up to the size of the available space. Normally this works the way I expect, but putting text in the box causes the box to grow to fix the text rather than wrap to fix the box. The net result is that the text gets chopped off at the bounds of the parent. What’s the right way to do this?
Setting the flex basis will cause the text to wrap the size I provide but that is a fixed size layout rather than adaptive to the screen aspect ratio. Right now I am looking at writing a custom element that does this, but one would think there’d be a way to handle it in .uss

2

Hi @Arkenhammer !

The USS style property to have the text wrap is:

white-space: normal;

And here’s how to toggle it in the UI Builder:

8750787--1185651--CleanShot 2023-01-23 at 10.15.02@2x.png
8750787--1185651--CleanShot 2023-01-23 at 10.15.02@2x.png1656×1596 227 KB

Is there a specific reason why each paragraph is in its own label ?

3

Here is the uss I am using:

.text-section__first-paragraph {
    -unity-font-definition: var(--engine-regular);
    font-size: var(--font-size-small);
    color: var(--text-color);
    white-space: normal;
    min-width: 0px;
}

white-space: normal is the equivalent of that setting in UI Builder right? Is there another property I should set?
As for why I put them in different labels, its so I can control the spacing between paragraphs. These are built in code at run time from text stored in a YAML document.

This is the .uss for the parent:

.text-section {
    padding-left: 20px; padding-right: 20px; padding-top: 20px; padding-bottom: 20px;
    align-items: stretch;
    flex-direction: column;
    align-self: stretch;
    min-width: 0px;
}

The both the .text-section and the .text-section__first paragraph are forced to be larger than the space available. Not sure why. I don’t want the .text-section to be larger that the space available in its parent. I am trying to figure out how to force it to stay in bounds. Do I need to write a custom element which, in C#, explicitly sets the width of the element in the style sheet? If I put a width in the .uss file it wraps correctly. However I really want the size to by dynamic based on the screen aspect ratio. I want this layout to work right for both 16:9 and 16:10 screens.