Manual Word Wrapping UI Text?

I’m creating a text box for a jRPG style game. These types of games generally have text that “types” letter by letter. So, I’ve got a system that does this, and adds the characters to the UI.Text.text field one by one.

However, when doing this, it creates the unwanted side effect of the words not word wrapping until the exact character goes outside the box. Basically, the word starts being typed on the line above where it will end up.

So, I need to find a way to insert line breaks before the word that causes the word wrap to prevent this from occurring. I think I need to find the width of the current line of text being typed only, and compare that with preferredWidth instead. But that doesn’t seem possible. Are there any other, easier ways this can be done?

A perhaps more hacky solution could be to insert transparent color tags to your text. The advantage of this is that you don’t have to do the wordwrapping yourself.


"Example of how I can split this pi<color=#00000000>ece of text with wordwrapping still functioning</color>"

Ofcourse you would have to enable the “Rich Text” checkbox on your Text component.

The way this works that instead of adding one char to your text every time, you assign the complete text, with the color tag inserted at your current last character index.

Precalculate each word length, if it overflows the width start typing it on a new line.

You can use "
" in your script to separate 2 lines, like this:

 GetComponent<Text>().text = "This is a test

to separate lines";