How to make string fit the width of textbox.

This one should be simple enough, however finding answers has been hard due to the way it easily gets confused with other questions in google search.
Previously I was looking for a way to emulate a html <hr> tag, I was suggested to simply use ___
The issue with this is that if the textbox changes size then it will either word wrap or fall short, looking bad.
I could possibly use a new text component with width truncate and a very long string, followed by another text component to continue the string, but considering i may need to split the ui up 3+ times, this means a lot of extra components.

So, what I want to do is find the width of the textbox after all other text has been added, and then insert a series of ___ to create a horizontal line divider. How can I do this while keeping font size consistent and not needing to add multiple extra components to my UI.

I have attached the way i want it to look more or less when completed.


Note: if an easier way to add dividing horizontal lines exists within text components for unity UI, please inform me and I will use that readily.

 

are you using TextMeshPro? if not, why not?

the feature you need is called 'wrapping & overflow'
TextMeshPro is a free and fairly powerful text-rendering unity asset that you can get through the Asset Store and has it all done for you.

(it belongs to the Unity's standard official package, but might be still disabled when you start it up, because they've acquired it recently.)

 

I'm aware of the TMP asset, there are some pros and some cons to this option.
I could turn off word wrapping and truncate overflow to get the effect desired, however then I would need to manually add line spaces for the text that I actually want to word wrap properly, or have multiple different TMP elements for different circumstances which repeats the issue from above.
So again it becomes a case of not wanting to rely on having multiple text elements that need to be referenced and interacted with via script if it can be avoided. If it can not be avoided I will use this solution.

The ideal solution is a way to calculate the correct number of symbols to insert so that the horizontal line formed does not word wrap like the rest of the text will, and so that it doesnt fall horrendously short when the textbox is wider.

Edit: to answer the initial question though, i wasnt using TMP because prior to a few days ago i was using an older version of unity that didnt have it and didnt feel like changing them all over to TMP from regular text

 

well TMP is far superior to the previous text rendering solution, though I can't tell you immediately what to look for. I know it can truncate the text by adding ellipses to the end, meaning it has to be aware of the actual text width.

the other thing I'm sure of is that having multiple components for this kind of (tbh pretty standard typesetting) "effect" is definitely not an elegant solution, so it must've been a priority for any industry-standard text renderer such as TMP.

I know for sure that it supports non-breaking spaces, arbitrary spacing, overlays, margins, rich text, and inline sprites. all if it seems much more advanced than what you ask for, so it would be kinda silly if it didn't work for you.

I'd guess that you want a sprite that represents a horizontal rule with an additional in-text tag that instructs it to stretch to 100% of the text width. this is how you would normally define such a rule in any text-setting program.

 

Will be looking into this train of thought, i.e. stretching out an inline sprite of a straight line via TMP.
I am quite impressed by this feature and its reason enough to make the switch over, so as soon as I get the new feature working I'll go through and change the scripts etc.
I haven't worked out exactly how to get it to work yet, but I've got sprites loading in and I quite like the way it is done.

 

also don't forget a 9-slice scaling for sprites that you got in the unity sprite importer
you could make a rule that's stylized with corners <=> and have it stretch without deformations <====>

 

Can you confirm (and point me towards a resource for assistance) that sprites will truncate via the overflow options?
Everything is setup and ready to work, except that it currently flows completely out of the text area and covers the entire width of the screen.

 

If you don't mind having each text segment as its own game object, you will parent them onto an object with vertical layout group. From there your dividers can be image objects colored black. the images can be placed in the same vertical layout group parent between your text lines, or placed in the text lines themselves as a child object.

 

well I'm not sure, and can't confirm that they truncate.
I can't tell you how to implement the whole thing in detail. at least not until I try it on my own.
maybe you should look into masking it via general UI accessories.

or, if everything else fails, you could simply add two stretched sprites above and below the dynamically-sized text box via script. all you need is to transfer the value of textbox width to a value of horizontal scale between two ui elements. and also to move either the top one's or the bottom one's vertical position based on textbox height, to adjust for the eventuality of multiline auto-wrapping, which is the whole benefit here.

all in all, you definitely don't want multiple textboxes for the same paragraph, that's like really bad.

 

A mask worked perfectly and its a clear sign up how tired i am after having worked at this for as long as i have that i missed it.
It's not perfect so ill be tinkering with numbers, but at the very least im happy with it now.
Thankyou for pointing me in the right direction.