# Fit Value

The Text Fitting system automatically adjusts the font size, weight, and line height of text elements so that they fit within their containers. This dynamic resizing is especially useful for responsive layouts where available space may vary, ensuring that content is always legible.

### Basic Usage

To enable automatic text resizing, add the `data-value-fit="true"` attribute to your element. The system will automatically adjust the element's font size and weight to fit the content
 on a single line within the container width. This works for both numeric and text values.
 For multi-line text fitting, see the `data-value-fit-max-height` option below.

$1,000 Dundies Budget

$1,000,000 Scott's Tots

$1,000,000,000 Sabre Revenue

Fit ValueDunder Mifflin

    <span class="value value--xxxlarge" data-value-fit="true">$1,000</span>

    <span class="value value--xxxlarge" data-value-fit="true">$1,000,000</span>

    <span class="value value--xxxlarge" data-value-fit="true">$1,000,000,000</span>

### Single-line Text Fitting

Text values are automatically fitted to a single line when using `data-value-fit="true"` without specifying a max height.
 The system derives the single-line height from the element's computed line-height, then shrinks the font size
 and weight until the text fits on one line within the container.

Assistant to the Regional Manager Dwight's Title

Threat Level Midnight Michael's Film

World's Best Boss Michael's Mug

Fit ValueDunder Mifflin

    <span class="value value--xxxlarge" data-value-fit="true">Assistant to the Regional Manager</span>

    <span class="value value--xxxlarge" data-value-fit="true">Threat Level Midnight</span>

    <span class="value value--xxxlarge" data-value-fit="true">World&#39;s Best Boss</span>

### Multi-line Text Fitting

To allow text to wrap across multiple lines while still fitting within a constrained area, specify a maximum height
 using the `data-value-fit-max-height` attribute (in pixels).
 This overrides the default single-line behavior, allowing the text to wrap while ensuring it stays within both
 width and height constraints through automatic font size and weight adjustments.

Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me. Michael Scott

Identity theft is not a joke, Jim! Millions of families suffer every year. Dwight Schrute

That's what she said. Michael Scott

Fit ValueDunder Mifflin

    <span class="value value--xxxlarge" data-value-fit="true" data-value-fit-max-height="340">
      Would I rather be feared or loved? Easy. Both. I want people to be afraid of how much they love me.
    </span>

    <span class="value value--xxxlarge" data-value-fit="true" data-value-fit-max-height="340">
      Identity theft is not a joke, Jim! Millions of families suffer every year.
    </span>

    <span class="value value--xxxlarge" data-value-fit="true" data-value-fit-max-height="340">
      That&#39;s what she said.
    </span>

Previous

[Format Value Format numbers and values with consistent styling](/framework/docs/3.1/format_value)

Next

[Content Limiter Change font size when content overflows to fit within the container](/framework/docs/3.1/content_limiter)