Custom Text: How To Fit Overflowed Text

Contents:

• Setting the width and the height of a text field
• "Fit Overflowed Text" feature
• "Auto Text Size By Width And Height" feature

Related Articles:

• Customization - Static Area For Monograms & Text: Multi font family / color / size selector for users. Charge per character feature. Glow effect

click on the images to open in a new tab

Hello!

This page explains how to fit text within a designated area and prevent it from overflowing.

When you create a "Simple Text" layer, a text field automatically appears and adjusts its size based on the default text you add.

By default, if no adjustments are made, the text added by customers will appear in a single line without any restrictions. See the examples below:

The images below illustrate how the functionality works by default. As you can see, the text stretches freely in the preview based on its length, without any restrictions. If the text is too long, it may extend beyond the phone case borders.

To prevent text overflow, you can modify several settings within the layer:

1. Text Width Auto and Text Height Auto
2. Fit Overflowed Text
3. Auto Text Size By Width and Height

Let's explore these options to effectively manage text overflow.

To adjust the text field settings, navigate to the layer's settings and select Text Settings.

The "Text Width Auto" and "Text Height Auto" options allow automatic resizing of the text field. Toggle them off if you prefer to set the dimensions manually.

As you can see, when "Auto Width" is turned off, the text remains within the horizontal boundaries of the area. However, it still expands vertically.

The next step is to set the height and adjust the line spacing to control the text layout.

Here’s how the text spacing adjusts based on the "Line Height" setting:

Now, enable the "Fit Overflowed Text" feature. If the text is too long, the font size will automatically decrease to ensure it fits within the designated text area.

The "Auto Text Size By Width And Height" feature gradually adjusts the font size to ensure the text fits within the designated text field.

Here's how it looks on the preview: