Fit Text

Scales a line of text to fit within its container.

The fit text component is useful for displaying titles, headings, and content of varying lengths on a single line. Instead of wrapping, the text will scale to fit its container within the minimum and maximum font sizes allowed.

A Resize Observer is used internally to make the text respond to window resizing and orientation changes. Try resizing the window or turning your device to see the text update.

<quiet-fit-text id="fit-text__editable" style="border: dashed 2px var(--quiet-neutral-stroke-soft);">
  The cute gray kitten jumped into the flower pot
</quiet-fit-text>

<br>

<quiet-text-field
  id="fit-text__editable-input"
  label="Customize the text"
  value="The cute gray kitten jumped into the flower pot"
  clearable
></quiet-text-field>

<script>
  const text = document.getElementById('fit-text__editable');
  const input = document.getElementById('fit-text__editable-input');

  input.addEventListener('quiet-input', () => {
    text.textContent = input.value;
  });
</script>

Examples Jump to heading #

Adjusting the width Jump to heading #

By default, fit text has block styling so it stretches to fit its containing element. You can set a width or max-width on the component (or a parent element) if you need to constrain it.

<quiet-fit-text style="max-width: 200px; border: dashed 2px var(--quiet-neutral-stroke-soft);">
  Be Quiet
</quiet-fit-text>

Changing text styles Jump to heading #

Text styles are inherited, so you can set text-related properties on the component itself or an ancestor element.

<div style="border: dashed 2px var(--quiet-neutral-stroke-soft);">
  <quiet-fit-text style="font-family: Georgia, serif;">
    The cute gray kitten jumped into the flower pot
  </quiet-fit-text>

  <quiet-fit-text style="font-family: Impact, sans-serif;">
    The cute gray kitten jumped into the flower pot
  </quiet-fit-text>

  <quiet-fit-text style="font-family: 'Trebuchet MS', Verdana, sans-serif;">
    The cute gray kitten jumped into the flower pot
  </quiet-fit-text>

  <quiet-fit-text style="font-family: 'Marker Felt', 'Comic Sans MS', cursive;">
    The cute gray kitten jumped into the flower pot
  </quiet-fit-text>

  <quiet-fit-text style="font-family: Consolas, Monaco, monospace;">
    The cute gray kitten jumped into the flower pot
  </quiet-fit-text>
</div>

API Jump to heading #

Importing Jump to heading #

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet@1.0.0/dist/components/fit-text/fit-text.js';

import '@quietui/quiet/dist/components/fit-text/fit-text.js';

Slots Jump to heading #

Fit Text supports the following slots. Learn more about using slots

Properties Jump to heading #

Fit Text has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Methods Jump to heading #

Fit Text supports the following methods. You can obtain a reference to the element and call them like functions in JavaScript. Learn more about methods