Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice

Wrapping child Text with Content Size Fitter

Discussion in 'UGUI & TextMesh Pro' started by myak, Apr 2, 2015.

  1. myak


    Mar 30, 2015
    I have a panel with a slice image in my scene, with a Content Size Fitter and Vertical Layout Group, and a Text child. This is working fine, and the panel expands accordingly to the contents of the Text.

    However, I don't know how to make the Text element wrap its contents when it becomes too big.

    Right now the scene is setup is as follows:
    • Canvas
      • Panel
        Content Size Fitter (Horizontal Fit = Preferred Size, Vertical Fit = Preferred Size)
        Vertical Layout Group (Child Force Expand = Width, Height)
        • Text (Horizontal Overflow = Wrap, Vertical Overflow = Truncate)
    If I set up a Layout Element on the text, and tell it to have a Preferred Width of 100, the text will wrap at 100, but it will also have a minimum size of 100, which I do not want. Basically I want to set up a maximum width, but not minimum.

    I could do this via a script, by checking if the calculated parent panel width exceeds 100 and if it does, set the Text LayoutElement.preferredWidth to 100, but I'd rather use some built-in functionality if there is one.

    The sample scene is attached. Any help would be greatly appreciated.

    In case anyone's interested, the script that makes it happen is below (Update() is probably not the right place to do it, but RectTransform.rect is not calculated yet in Start() and I'm too tired to figure it out now at 1:30am):

    Code (CSharp):
    1. using UnityEngine;
    2. using System.Collections;
    3. using UnityEngine.UI;
    5. [RequireComponent(typeof(LayoutElement))]
    6. public class MaxContentSize : MonoBehaviour
    7. {
    8.     public int maximumWidth = 100;
    10.     private Rect parentRect;
    12.     void Update ()
    13.     {
    14.         RectTransform tr = transform.parent as RectTransform;
    15.         if (tr == null) return; // No parent GUI element
    17.         if (parentRect != tr.rect)
    18.         {
    19.             parentRect = tr.rect;
    20.             if (parentRect.width > maximumWidth)
    21.             {
    22.                 LayoutElement thisElement = GetComponent<LayoutElement>();
    23.                 thisElement.preferredWidth = maximumWidth;
    24.             }
    25.         }
    26.     }
    27. }

    Attached Files:

  2. Sun-Pengfei


    Nov 12, 2015
    Code (CSharp):
    1.         TextGenerator textGen = new TextGenerator();
    2.         TextGenerationSettings generationSettings = textCompo.GetGenerationSettings(textCompo.rectTransform.rect.size);
    3.         float width = textGen.GetPreferredWidth(text, generationSettings);
    4.         if (width > preferedWidthMax)
    5.         {
    6.             layoutElement.preferredWidth = preferedWidthMax;
    7.         }
    This is the most elegant way I've found to this problem.
    SunnySunshine likes this.