纯css实现单行、多行文本溢出显示省略号

单行文本溢出显示省略号

 div{
            width:200px;
            background-color: bisque;
            /* 强制文本不换行 */
            white-space: nowrap;
            /* 溢出隐藏 */
            overflow: hidden;
            /*显示省略号  */
            text-overflow: ellipsis;
            
        }
 <div>实现单行文本溢出显示省略号实现单行文本溢出显示省略号实现单行文本溢出显示省略号实现单行文本溢出显示省略号实现单行文本溢出显示省略号实现单行文本溢出显示省略号</div>

多行文本溢出显示省略号

 div{
                background-color: antiquewhite;
               /* 设置宽度 */
               width: 200px;
               /* 设置出省略的行数 配合旧版的弹性盒子使用 */
               -webkit-line-clamp:3;
               /* 兼容性 */
               display: -webkit-box;
               -webkit-box-orient: vertical;
               /* 设置省略号 */
               text-overflow: ellipsis;
               overflow: hidden;
        }
<div>多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号多行文本溢出显示省略号</div>