Does it support line clamping?

does it support line clamping?

Yes, Satori supports line clamping.

You can achieve line clamping in two ways:

###1. Using the lineClamp shorthand (Recommended)

Satori supports a lineClamp property. For it to work, you must also set display: 'block'.

<div
  style={{
    display: 'block',
    lineClamp: 3,
  }}
>
  Your long text here...
</div>

It also supports a custom ellipsis string via the lineClamp property:

<div
  style={{
    display: 'block',
    lineClamp: '3 " (read more)"',
  }}
>
  Your long text here...
</div>

###2. Using the standard CSS -webkit-line-clamp

Satori also supports the traditional -webkit way of line clamping, which requires specific properties:

<div
  style={{
    display: '-webkit-box',
    WebkitBoxOrient: 'vertical',
    WebkitLineClamp: 3,
    textOverflow: 'ellipsis',
    overflow: 'hidden',
  }}
>
  Your long text here...
</div>

###Key Requirements:

• For lineClamp to work, the display must be set to block.
• For WebkitLineClamp to work, the display must be set to -webkit-box and WebkitBoxOrient to vertical.