maxhill.se - m-fit-text

<m-fit-text> 1 SLOTS 1 PROPS

overview

examples

properties

methods

events

slots

css parts

Automatically scales text to fit the full width of its container using CSS container queries.

Basic Usage

  Hello World
Code <div class="box" data-padded="false" style="max-width: 600px;">
  <m-fit-text>Hello World</m-fit-text>
</div> 

With Display Font

  Hero Text
Code <div class="box" data-padded="false" style="max-width: 600px;">
  <m-fit-text font-display>Hero Text</m-fit-text>
</div> 

Responsive Sizing

  Resize Me
Code <div class="box" data-padded="false" style="resize: horizontal; overflow: auto; max-width: 800px; min-width: 200px;">
  <m-fit-text>Resize Me</m-fit-text>
</div> 

Maximum Font Size

  Limited Size
Code <div class="box" data-padded="false" style="--max-font-size: 48px; max-width: 800px;">
  <m-fit-text>Limited Size</m-fit-text>
</div> 

Multiple Lines

  This is longer text that scales
Code <div class="box" data-padded="false" style="max-width: 500px;">
  <m-fit-text>This is longer text that scales</m-fit-text>
</div> 

In A Grid Layout

    Welcome
  
Code <div class="content-grid">
  <div class="box" data-padded="false">
    <m-fit-text font-display>Welcome</m-fit-text>
  </div>
</div> 

NAMETYPEDEFAULT

fontDisplay boolean false: Whether to use the display font family

NAMERETURNS

render void
define void

NAMEDETAIL TYPE

NAME

(default): Default slot for text content to be scaled