- Home /
New UI 4.6: How to show ellipsis (...) for text overflow
We're working on an app that displays a lot of user-generated data, so we frequently have to deal with the potential for text overflow. Most UI frameworks provide the ability to truncate the text and show an ellipsis (...) to indicate additional text is not shown.
I don't see a direct way to do this in the new 4.6 UI. Is there any good way to do this manually?
Thanks in advance, --Bob
Answer by drod7425 · Feb 12, 2015 at 08:32 PM
Something I've been wanting to do for a while now. Create this UI structure in your scene:
- Canvas (default Canvas)
- TextOverflowEllipsis (default Horizontal Layout Group, TextOverflowEllipsis script)
Text (default Text with some long test text)
Ellipsis (default Text with text '...', Layout Element with a min width)
- TextOverflowEllipsis (default Horizontal Layout Group, TextOverflowEllipsis script)
And here is the script that goes on the TextOverflowEllipsis gameobject:
using UnityEngine;
using UnityEngine.UI;
public class TextOverflowEllipsis : MonoBehaviour {
public Text text;
public GameObject ellipsis;
RectTransform parentRect;
float textWidth,parentWidth;
string textStr="";
void Start () {
parentRect = GetComponent<RectTransform>();
}
void Update () {
if(text.text != textStr || !parentRect.rect.width.AlmostEquals(parentWidth,.01f)){ //If the current text is not the same as the cached text or the container width changes
CheckTextWidth(); //Check the text's width
textStr = text.text;
}
}
void CheckTextWidth() {
textWidth = LayoutUtility.GetPreferredWidth(text.rectTransform); //This is the width the text would LIKE to be
parentWidth = parentRect.rect.width; //This is the actual width of the text's parent container
ellipsis.SetActive(textWidth > parentWidth); //If the text width is bigger than the container, show the ellipsis
}
}
Just set the Text component of the Text gameobject to the 'text' field and the Ellipsis gameobject to the 'ellipsis' field in the inspector of the TextOverflowEllipsis gameobject. After that, you can just design the Text and Ellipsis to match your current style.
@drod7425, this is helpful, but it doesn't tell you where to put the ellipses. If I know the text gets cut off, how do I know what the last word shown is, after which the ellipses should appear? I guess with ellipses you could just display them in a separate Text
, but I have a similar problem where I'd like the extra text to overflow into another text box. Any advice?
error CS1061: Type float' does not contain a definition for
AlmostEquals' and no extension method AlmostEquals' of type
float' could be found. Are you missing an assembly reference?
Replace !parentRect.rect.width.AlmostEquals(parentWidth,.01f)
by !$$anonymous$$athf.Approximately(parentRect.rect.width, .01f)
Answer by TheMoot · Jan 28, 2016 at 01:25 PM
If anyone is looking for a different solution to this this is how I did it. I wrote a simple extension to the text class in unity.ui
using UnityEngine;
using UnityEngine.UI;
using System.Collections;
public class TextTruncExt : Text
{
string updatedText = string.Empty;
protected override void OnPopulateMesh(VertexHelper toFill)
{
Vector2 extents = rectTransform.rect.size;
var settings = GetGenerationSettings(extents);
cachedTextGenerator.Populate(base.text, settings);
float scale = extents.x / preferredWidth;
//text is going to be truncated,
//cant update the text directly as we are in the graphics update loop
if (scale < 1)
{
updatedText = base.text.Substring(0, cachedTextGenerator.characterCount-4);
updatedText += "...";
}
base.OnPopulateMesh(toFill);
}
void Update()
{
if(updatedText != string.Empty && updatedText != base.text)
{
base.text = updatedText;
}
}
}
Its not the most efficient way but it works. It currently just cuts off the string and adds the ellipsis. You could easily make it cut back to the next space then add the ellipsis if you only wanted whole words.
Hope this helps someone.
Answer by raulssorban · Aug 19, 2016 at 12:11 AM
Hey, this is my (simple) way to do it:
Check the text's length, as:
if(text.Length > calculatedSize); text.Remove (calculatedSize) + "...";
Simple as that.
Simple and elegant! And most important! Works as simple it must be! Thanks for sharing with us!
What about with different languages like Hindi where letters together can form matras ?
Answer by Asmodeus · Feb 05, 2015 at 05:01 AM
I'm trying to figure this out as well. This article is kinda old.
http://forum.unity3d.com/threads/text-clipping-with-dots.201071/
Answer by CalebBarton · Sep 05, 2018 at 05:35 AM
I'm going to post an answer, as this page came up as my first search response, but there's a very simple solution.
This link has a very simple solution:
public static string Truncate(this string value, int maxChars)
{
return value.Length <= maxChars ? value : value.Substring(0, maxChars) + "...";
}
Usage:
var s = "abcdefg";
Console.WriteLine(s.Truncate(3));
So when setting the text value, you can pass in the text through the truncate function first. You could also create a listener for the text value changing if you wanted to get technical with it. Hope this helps others.
Your answer
Follow this Question
Related Questions
New UI: Text scale/drawing problem 1 Answer
Unity 4.6 UI Text is really small when I build the game? 1 Answer
Best method for updating children of instantiated buttons? 0 Answers
What's your equivalent of old GUIStyle ? 0 Answers
Try to reproduce this Text UI element "bug" if you are developing for IOS 0 Answers