Unity UGUI 之实现 Text 文本文字过长，省略号显示（TextMeshPro 和常规 Text 二种方法）

忘是亡心i 2023-03-05 03:16 11阅读 0赞

![20200804112910158.png][]

# Unity UGUI 之 实现 Text 文本文字过长，省略号显示（TextMeshPro 和常规 Text 二种方法） #

**目录**

Unity UGUI 之 实现 Text 文本文字过长，省略号显示（TextMeshPro 和常规 Text 二种方法）

一、简单介绍

二、实现原理

三、注意事项

四、效果预览

五、实现步骤

常规 Text

TextMeshPro

六、关键脚本

--------------------

## 一、简单介绍 ##

UGUI，是Unity自带的 GUI 系统，震撼力一些常规的操作，便于后期类似操作的参考。

本节介绍，在Unity中文本文字过多的，使用省略号代替的方法，二种方式，目前各有局限性。

## 二、实现原理 ##

1、常规Text 使用 TextGenerator().characterCountVisible 得到可显示的长度，当字长大于 TextGenerator().characterCountVisible，就省略号代替

2、TextMeshPro 里面自带属性 Ellipsis ，直接添加此属性即可，实现文字过长省略号显示

## 三、注意事项 ##

1、常规Text 的方法到 Unity 2019 以上 好像 TextGenerator().characterCountVisible  一直返回为 0 ，不能正常获取显示长度（有谁知道原因的话，可留言）

2、TextMeshPro 目前不支持中文，需要自己构建中文字体

## 四、效果预览 ##

![20200804114117492.gif][]

## 五、实现步骤 ##

### 常规 Text ###

1、打开Unity ，新建空工程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

2、在场景中添加 Text 组件，用于测试

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1][]

3、在工程中新建脚本，TextExtension 扩展脚本，编写文字过长省略号显示的代码，TestSetTextWithEllipsis 用于测试 TextExtension 脚本的功能

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2][]

4、把 TestSetTextWithEllipsis 挂载到场景中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3][]

5、运行场景效果如上

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4][]

### TextMeshPro ###

1、打开Unity ，新建空工程

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70][]

2、在场景中添加 TextMeshPro  组件，用于测试

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5][]

3、在 TextMmeshProUGUI 属性中 overflow 属性设置为 Ellipsis ，即可实现过长文字省略号显示

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6][]

4、运行场景，效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7][]

## 六、关键脚本 ##

1、TextExtension.cs

using UnityEngine;
    using UnityEngine.UI;
    
    /// <summary>
    /// Text (UGUI) 组件扩展类
    /// 功能
    /// 实现文字过长省略号显示
    /// </summary>
    public static class TextExtension 
    {
        //  operating in no overflow (Horizonal|Vertical)
        public static void SetTextWithEllipsis(this Text textComponent, string value)
        {
            // create generator with value and current Rect
            var generator = new TextGenerator();
            var rectTransform = textComponent.GetComponent<RectTransform>();
            var settings = textComponent.GetGenerationSettings(rectTransform.rect.size);
            generator.Populate(value, settings);
    
            // truncate visible value and add ellipsis
            var characterCountVisible = generator.characterCountVisible;
            var updatedText = value;
            if (value.Length > characterCountVisible)
            {
                updatedText = value.Substring(0, characterCountVisible - 1);
                updatedText += "…";
            }
    
            // update text
            textComponent.text = updatedText;
        }
    
        /// <summary>
        ///  Unity 2019 版本以上
        /// </summary>
        /// <param name="textComponent"></param>
        /// <param name="value"></param>
        public static void SetTextWithEllipsis(this Text textComponent, string value, int characterVisibleCount)
        {
    
            var updatedText = value;
    
            // 判断是否需要过长显示省略号
            if (value.Length > characterVisibleCount)
            {
                updatedText = value.Substring(0, characterVisibleCount - 1);
                updatedText += "…";
            }
    
            // update text
            textComponent.text = updatedText;
        }
    }

2、TestSetTextWithEllipsis.cs

using System.Collections;
    using System.Collections.Generic;
    using UnityEngine;
    using UnityEngine.UI;
    
    public class TestSetTextWithEllipsis : MonoBehaviour
    {
        public Text text;
        string strValue = string.Empty;
        // Start is called before the first frame update
        void Start()
        {
            
        }
    
        // Update is called once per frame
        void Update()
        {
            
            if (Input.GetKeyDown(KeyCode.A))
            {
                strValue +=  " You";
                Debug.Log("strValue "+ strValue);
                text.SetTextWithEllipsis(strValue);
            }
        }
    }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8][]

[20200804112910158.png]: /images/20230208/b4f289bb8e554db0939ef5da7fb81ec9.png
[20200804114117492.gif]: /images/20230208/41b7ad05be104aecb608f95992cb8551.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70]: /images/20230208/97488275289e48529f9334b9bcd276a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 1]: /images/20230208/327dbac88b7847ffba5506dcd27adafd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 2]: /images/20230208/b38335ae02084b62b0c5784de6624714.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 3]: /images/20230208/0e8ada2e99f04dfab654dba90bfc3a07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 4]: /images/20230208/e91c7216d1f74ca48d2a32bb4e162a85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 5]: /images/20230208/6f2058cdbf804b288ff4c4f09efbdd8c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 6]: /images/20230208/c1368508f13f41fca0508c0464cd628a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 7]: /images/20230208/c8bcbb57e24846eba98536b952c4b581.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQzNjEyODA_size_16_color_FFFFFF_t_70 8]: /images/20230208/80ee58955e5d4a05b497f452ef3f6aa4.png