Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 13 Next capture
2021 2022 2023
1 capture
13 Jun 22 - 13 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
4
Question by bobmeyers · Nov 20, 2014 at 07:31 AM · uitext

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

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

5 Replies

· Add your reply
  • Sort: 
avatar image
4

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)

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.

Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image thomaswp · May 31, 2015 at 03:22 PM 1
Share

@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?

avatar image unity_ZhEHTyR_5A_TIQ · Jul 08, 2019 at 02:43 PM 0
Share

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?

avatar image Hellium unity_ZhEHTyR_5A_TIQ · Jul 08, 2019 at 02:44 PM 0
Share

Replace !parentRect.rect.width.AlmostEquals(parentWidth,.01f) by !$$anonymous$$athf.Approximately(parentRect.rect.width, .01f)

avatar image
2

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.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
2

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.

Comment
Add comment · Show 4 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image rd3_developer · Feb 23, 2017 at 01:42 PM 1
Share

Simple and elegant! And most important! Works as simple it must be! Thanks for sharing with us!

avatar image raulssorban rd3_developer · Feb 23, 2017 at 01:56 PM 0
Share

Thanks, glad it helped you!

avatar image rohitvishwakarma1819 · Oct 02, 2020 at 03:10 PM 0
Share

What about with different languages like Hindi where letters together can form matras ?

avatar image Yiming075 rohitvishwakarma1819 · Mar 06 at 10:15 AM 0
Share

Then need to use another solution.

avatar image
0

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/

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image
0

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.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

13 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

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


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges