css single line text overflow display ellipsis

16314010:

You can use properties in CSS text-overflowto implement overflowing ellipsis on a single line of text.

The specific implementation steps are as follows:

1. First, set the width of the element that needs to display the ellipsis to a fixed value or a maximum width.

    .ellipsis {
        width: 200px;
        /* 或者 */
        max-width: 200px;
    }

1. Next, use white-spaceattributes to force the element's text content to fit on a single line, preventing line breaks.

    .ellipsis {
        white-space: nowrap;
    }

1. Then, use overflowthe attribute to hide text content that exceeds the width of the element.

    .ellipsis {
        overflow: hidden;
    }

1. Finally, use text-overflowthe attribute to display text content that exceeds the element's width as ellipses.

    .ellipsis {
        text-overflow: ellipsis;
    }

The full code looks like this:

    .ellipsis {
        width: 200px;
        max-width: 200px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

In this way, the ellipsis can be displayed when the single-line text overflows.