TextFit Web Component Test

Resize Test (drag the corner of the box)

This is a test of the TextFit web component. Try resizing the container to see how the text automatically adjusts its size to fit within the constraints.

Dynamic Content Test

Original content that will change

Window Resize Test

This text should resize when you resize the browser window. The component now properly handles window resize events!

Editable Text Test - Type Anything!

This is editable text. Change me and see how TextFit adapts! Try writing a really long sentence to see how it adjusts the font size to fit within the constraints.

Live Typing Test - contenteditable

Click in the box below and type directly:

Click here and start typing to see real-time text fitting!

Height Constraint Test

This TextFit is constrained by height instead of lines:

This text is constrained by maximum height rather than line count. As you add more content, the font size will shrink to fit within the 120px height limit.

Single Line Test

Force text to fit on exactly one line:

This must fit on one line no matter how long it gets!

Dynamic Content Addition

Paragraph 1: Base content
Paragraphs: 1

Extreme Content Test

Normal length text

Mixed Font Families Test

This text is in Arial. This text is in Times. This text is in Courier. And this is Georgia font.

Mixed Font Sizes Test

Large text normal text small text extra large and some regular text mixed in between all these different sizes.

Mixed Line Heights Test

This paragraph has tight line spacing (1.2).

This paragraph has loose line spacing (1.8).

This paragraph has very loose line spacing (2.5).

Tight span and loose span.

Font Unit Tests (%, px, em, rem)

Percentage Units (%)

Text using percentage units for font sizing

Pixel Units (px)

Text using pixel units for font sizing

Em Units (em)

Text using em units for font sizing

Rem Units (rem)

Text using rem units for font sizing

All Attributes Combination Test

Width Only Mode

This TextFit only adjusts for width, not height constraints

Don't Grow in Height

This TextFit won't grow taller than its initial height

Disabled Dynamic Font Size

This TextFit keeps original font size, only counts lines

High Debounce Time

Type here - 1 second delay

Strict Font Size Range

Very narrow font size range (80%-90%)

Combined Constraints

Both line and height constraints with font limits

Advanced Mixed Styling Test

Title in Georgia

This paragraph uses Arial with custom line-height and smaller font size.

code snippet emphasized text in Times bold Verdana text

Overflow Error Display Test

This text will show overflow errors when it exceeds 2 lines. Try adding more content to trigger the error display.