Defines how the overflowed content gets displayed.
| Class | Properties |
|---|---|
| text-overflow-clip | text-overflow: clip; |
| text-overflow-ellipsis | text-overflow: ellipsis; |
<div class="flex align-items-center justify-content-center flex-column">
<div class="surface-overlay border-round border-1 p-3 white-space-nowrap overflow-hidden text-overflow-clip" style="width:200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div class="surface-overlay border-round border-1 p-3 mt-3 white-space-nowrap overflow-hidden text-overflow-ellipsis" style="width:200px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
</div>
Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:text-overflow-clip to use a responsive class.
| Class | Description |
|---|---|
| sm: | small screens e.g. phones |
| md: | medium screens e.g. tablets |
| lg: | large screens e.g. notebooks |
| xl: | larger screens e.g monitors |