Text

The Text component is a flexible option for displaying and styling inline text when semantic tags are not required. Rendered as a span element, it offers various size options, line height control, and truncation.

Flexible size adjustment

Optional trimming to remove line height

Supports text truncation for long texts

Architecture

so-text
Slot: default

Reference

  • Text

    Renders an HTML span element. It handles text formatting, size adjustments, and various display options.

    • Attributes

      • id
        string
        / default: -

        A unique identifier for the text component. This can be used for targeting the element with custom styles or scripts.

      • size
        enum
        / default: md

        Determines the size of the text. Values range from xs to 6xl, with md being the default size.

      • trim
        enum
        / default: none

        Controls the removal of excess line height at the start and/or end of the text block. Use none for default spacing, start or end to trim specific edges orboth to trim both edges.

      • truncate
        boolean
        / default: false

        When set to true, the text will be truncated with an ellipsis if it exceeds the container width. Alternatively, you can specify a number to limit the visible lines before truncation occurs.

made for toddle