Skip to main content

Text Auto-Resize

The auto-resize feature automatically adjusts font size so that text fits perfectly within its container, ensuring optimal readability and visual appearance.

What It Does​

When text is placed in a container, the platform automatically:

  • Adjusts the font size to fit the available width
  • Prevents words from breaking mid-word
  • Respects maximum line constraints when specified
  • Maintains visual consistency across different text lengths

Why It's Useful​

Problem Without Auto-Resize:

  • Long words or phrases might overflow the container
  • Text might break awkwardly in the middle of words
  • Manual font size adjustments are time-consuming
  • Inconsistent text sizes across different content

Solution With Auto-Resize:

  • Text always fits perfectly within the container
  • Words remain intact and readable
  • Consistent visual appearance regardless of content length
  • No manual adjustments needed

How It Works​

The platform intelligently calculates the optimal font size by:

  1. Word-Fit Check: Ensures each word fits within the container width
  2. Line Limit: Respects maxLines constraint if specified
  3. Optimal Sizing: Finds the largest font size that meets all constraints

Example​

When you enter "DEIN FERNSTUDIUM ENTDECKEN" into a 170px wide container:

  • The platform detects that the text doesn't fit at the initial font size
  • It automatically reduces the font size until all words fit properly
  • The result is perfectly sized, readable text

Configuration​

Enable/Disable Auto-Resize​

Auto-resize is enabled by default. You can control it per element:

{
  style: {
    autoResize: true,  // Enable automatic font sizing (default)
    fontSize: 33       // Initial font size (will be adjusted if needed)
  }
}

Maximum Lines​

You can limit text to a specific number of lines:

{
  style: {
    maxLines: 2,       // Text will fit within 2 lines
    autoResize: true
  }
}

When maxLines is set, the platform ensures:

  • Text fits within the specified number of lines
  • Words don't break mid-word
  • Font size is optimized for both width and line constraints

Best Practices​

  • Use auto-resize for dynamic content: When text content changes frequently
  • Set maxLines for consistency: When you need text to fit in a specific area
  • Combine with containers: Use vertical stack containers for multi-line text layouts
  • Trust the system: The platform handles edge cases automatically

See also​