In Case You Missed the Previous Tutorials:
- Web Design Part 3: Fully Functional Horizontal Slider (Useful for Settings)
- Web Design Part 2: Adding Useful Features to ScrollingFrames
- Rounded Corners Hover Effect [Remade]
Hello fellow developer community!
In this series, you learn to replicate certain features found on websites! This ranges from making your UI more stylish to creating an easily navigable system.
Here’s What We Are Creating
This tutorial focuses on text, one of the most used and needed elements in your UI. And to be honest, it can sometimes get a little bit complicated if you are using a lot of these.
So today, we will learn how to truncate (shorten) long strings of text and add ellipsis (…) at the end to show that the text continues. And this system adjusts the amount of text shown when the size of the text element changes.
The thing is, TextScaled
is good and all but…it can get a bit awkward with long text. View this image below to see what I mean:
What the text says:
“As you can see (or probably cannot because this will be so small by the time you finsih reading this sentece), the text is very small with “TextScaled” enabled. Although it wraps at the end, it does hit a boundary. If you have long, long pieces of texts like this, consider using a custom trucating system to keep you UI professinal. If the text is truncated a lot, then you can allow the user to click the text to see a popup displaying the whole text.”
This System Versus the TextTruncate
Property
How is this different and more advantageous than the system Roblox already implemented into Studio? Learn about the pros of using the custom system here.
Before We Start…
Please have an understanding of
string.sub
. This is basically what drives our text truncate system.
Let Us Start!
This tutorial is 99% scripting. All you need to start is a TextLabel
and preferably a StringValue
nested inside the former.
Also, create a LocalScript
called “Truncater” (or anything you would like) inside the text. This script is only 46 lines (based on how I space things).
Variables
local text = script.Parent
local val = text.Value --string value
local stringUpdate = val.Value
local margin = 25 --space between actual text and background border
Function “subOne”
local function subOne(stringGotten)
return string.sub(stringGotten, 1, (#stringGotten - 1)) --ex: from "Hellooo" to "Helloo"
end
Function “Check”
local function check()
while text.AbsoluteSize.X - text.TextBounds.X < margin do
stringUpdate = subOne(string.sub(text.Text, 1, #text.Text - 3)) --to take out ...
text.Text = stringUpdate .. "..."
wait()
end
end
Rest
local function finalize()
text.Text = val.Value
if text.AbsoluteSize.X - text.TextBounds.X < margin then
check()
end
end
finalize() --need to call it initially
text:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
--[[consider using AbsoluteSize because it is updates
even when the parent size is updated, whereas Size would not]]
finalize()
end)
Explanation
subOne()
returns the string but one character chopped off (ex. “hi” to “h”)
check()
checks if the text fits within the bounds we have defined. If it does not, then it callssubOne()
with theTextLabel
's text minus three characters (to get rid of the …). Then, it updates the text with the new string with added ellipsis.
finalize()
resets the text to the full string, then calls oncheck()
if the text is not within our boundaries.
The rest: we need to call
finalize()
initially because we need to run the truncation when the text first loads. Then it is called every time theAbsoluteSize
of theTextLabel
changes.
Conclusion
That is pretty simple, right? And it works pretty well! Let me know if you experience any issues with this system.
Also, if you have anything you want to learn as a part of this series, feel free to ask me!
How useful is this text truncating system to you?
(1 = “ew, why is this even here?!”; 10 = “OMG, this is extremely helpful!”)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
0 voters
Thank you for your feedback and for reading this!