Clamp textual content to a single line with an ellipsis.
<Fragment>
<Clamp data-test="too-short-to-clamp">Hello world, I'm not clamped
<Clamp data-test="clamp-text">
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component. This is a very lengthy bit of textual content. This
is just text, no markup, but can be truncated via the Clamp component.
This is a very lengthy bit of textual content. This is just text, no
markup, but can be truncated via the Clamp component. This is a very
lengthy bit of textual content. This is just text, no markup, but can be
truncated via the Clamp component. This is a very lengthy bit of textual
content. This is just text, no markup, but can be truncated via the Clamp
component. This is a very lengthy bit of textual content. This is just
text, no markup, but can be truncated via the Clamp component. This is a
very lengthy bit of textual content. This is just text, no markup, but can
be truncated via the Clamp component. This is a very lengthy bit of
textual content. This is just text, no markup, but can be truncated via
the Clamp component.
</Clamp>
<Clamp data-test="clamp-text-no-whitespace">
Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.Thisisaverylengthybitoftextualcontent.Thisisjusttext,nomarkup,butcanbetruncatedviatheClampcomponent.
</Clamp>
</Fragment>
</Playground>