⌘ K
esc

    Text Overflow

    Defines how the overflowed content gets displayed.

    Classes
    Class Properties
    text-overflow-clip text-overflow: clip;
    text-overflow-ellipsis text-overflow: ellipsis;
    Examples
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    
    <div class="card">
        <div class="flex align-items-center justify-content-center card-container 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>
    </div>
    
    
    Responsive

    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.

    • sm: small screens e.g. phones
    • md: medium screens e.g. tablets
    • lg: large screens e.g. notebooks
    • xl: larger screens e.g monitors