In front-end development, when single or multiple lines of text overflow, they are displayed using ellipses.

1. If a single line of text overflows, use ellipses to display it.

The key code is as follows:

        .box1{
            width: 200px;
            height: 30px;
            line-height: 30px;
            margin: 0 auto;
            background-color: rgba(220, 220, 220, 0.751);
            /* 单行文本超出隐藏 用省略号代替 */
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

2. Multi-line text overflow is displayed using ellipsis

The key code is as follows:

        .box2{
            width: 200px;
            height: 60px;
            line-height: 30px;
            margin: 0 auto;
            background-color: rgba(220, 220, 220, 0.751);
             /* 多行文本超出隐藏 用省略号代替 */
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
        }

Summary: The above is how to use ellipses to display text overflow. I hope it will be helpful to everyone!