Format Text

<sl-format-text> | SlFormatText
Since 1.0 experimental

Format a text string in various ways.

<sl-format-text text="Normal text"></sl-format-text>

Examples

Truncation

Middle Truncation

Use the truncate="middle" attribute to truncate text in the middle with ellipsis. Control the truncation behavior with max-length, start, and end attributes. 

<sl-format-text
  truncate="middle"
  text="A veryyyyyyyyyyyyyyyyyyyyyyyyyyy longgggggggggggggggggggggg texttttttttttttttttttttttt">
</sl-format-text>

Custom Start and End Characters

Use start and end attributes to specify how many characters to show at the beginning and end of the truncated text. 

<div style="display: flex; flex-direction: column; gap: 10px;">
  <sl-format-text
    truncate="middle"
    start="5"
    end="5"
    text="A veryyyyyyyyyyyyyyyyyyyyyyyyyyy longgggggggggggggggggggggg texttttttttttttttttttttttt">
  </sl-format-text>

  <sl-format-text
    truncate="middle"
    start="10"
    end="3"
    text="A veryyyyyyyyyyyyyyyyyyyyyyyyyyy longgggggggggggggggggggggg texttttttttttttttttttttttt">
  </sl-format-text>

  <sl-format-text
    truncate="middle"
    start="3"
    end="10"
    text="A veryyyyyyyyyyyyyyyyyyyyyyyyyyy longgggggggggggggggggggggg texttttttttttttttttttttttt">
  </sl-format-text>
</div>

Maximum Length

Use the max-length attribute to control the maximum number of characters before truncation occurs. Default is 30. 

<div style="display: flex; flex-direction: column; gap: 10px;">
  <sl-format-text
    truncate="middle"
    max-length="10"
    text="A veryyyyyyyyyyy">
  </sl-format-text>
</div>

Auto Middle Truncation

If start or end is 0, or if start + end + 3 (ellipsis length) is greater than max-length, the component automatically splits the text evenly. 

<div style="display: flex; flex-direction: column; gap: 10px;">
  <!-- Invalid start/end values - auto splits -->
  <sl-format-text
    truncate="middle"
    max-length="20"
    start="15"
    end="15"
    text="A veryyyyyyyyyyyyyyyyyyyyyyyyyyy longgggggggggggggggggggggg texttttttttttttttttttttttt">
  </sl-format-text>

  <!-- Zero values - auto splits -->
  <sl-format-text
    truncate="middle"
    start="0"
    end="0"
    text="A veryyyyyyyyyyyyyyyyyyyyyyyyyyy longgggggggggggggggggggggg texttttttttttttttttttttttt">
  </sl-format-text>
</div>

No Truncation

When text length is less than or equal to max-length, no truncation occurs.

<div style="display: flex; flex-direction: column; gap: 10px;">
  <sl-format-text
    truncate="middle"
    max-length="50"
    text="Short text">
  </sl-format-text>

  <sl-format-text
    truncate="middle"
    text="Normal length text">
  </sl-format-text>
</div>

Second Example

TODO

[component-metadata:sl-format-text]

Slots

Name Description
(default) The default slot.
example An example slot.

Learn more about using slots.

Properties

Name Description Reflects Type Default
text The text to format. string ''
truncate Truncation option. 'none' | 'middle' 'none'
start The number of characters to show at the start when using middle truncation. number 3
end The number of characters to show at the end when using middle truncation. number 3
maxLength
max-length 		The maximum text length to determine if middle truncation should occur. number 30
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-event-name Emitted as an example. -

Learn more about events.

Custom Properties

Name Description Default
--example An example CSS custom property.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper.

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

  • <sl-example>