Web Design Part 4: Custom Text Truncating System With Ellipsis (Different From the Normal Text Truncate)

Resources Community Tutorials
,
#1

Return

In Case You Missed the Previous Tutorials:

Hello fellow developer community! :smile:

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:

AwkwardTextScaled
AwkwardTextScaled1300×731 392 KB

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.

TextTruncateExplorer

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 calls subOne() with the TextLabel'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 on check() 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 the AbsoluteSize of the TextLabel 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!

Next Tutorials:

13 Likes
Carbyne Tutorials Hub
Web Design Part 5: How to Make a Fade-In Hover Effect (Color Tween)
Web Design Part 2: Adding Useful Features to ScrollingFrames
Web Design Part 3: Fully Functional Horizontal Slider (Useful for Settings)
Combining and shrinking TextLabels?
Help with scaling text for different screensizes
#2

This is cool, however there is already a “TextTruncate” property on text labels that does this. Does this have any advantages over TextTruncate?

2 Likes
#3

Good point there!
The system explained above and the TextTruncate property are very similar, I admit.

However, there are some differences/advantages of the former vs. latter:

  1. The normal system does not have a set margin, so sometimes the text is right up to the edge and sometimes it is a bit far away. Whereas, using the system shown above, you can control the margin.
  2. In the normal one, the text only updates with an increment of one word (meaning, when you scale up the TextLabel, the more text is only shown if the next word can fit within bounds). But the custom truncation system causes the text to be updated by an increment of one character.
  3. More that I have not noticed yet.

Hopefully, that answers your question.

2 Likes