2021-09-23 html单行不换行溢出部分以省略号显示,多行文本溢出以省略号显示；内容太多隐藏部分；

参考文章：

html单行不换行溢出部分以省略号显示,多行文本溢出以省略号显示https://blog.csdn.net/weixin_42965828/article/details/115184179https://blog.csdn.net/weixin_42965828/article/details/115184179

css单行文字和多行文字溢出隐藏https://blog.csdn.net/weixin_43862991/article/details/107022650https://blog.csdn.net/weixin_43862991/article/details/107022650

 实现效果：显示一行，添加 ...

 代码

 .hide{
        overflow: hidden;/*多余的文字隐藏*/
        /*如下属性用来辅助实现多行文字溢出显示省略号*/
        display: -webkit-box;/*将盒子转为弹性盒子*/
        -webkit-box-orient: vertical;/*文字显示方式,默认水平*/
        -webkit-line-clamp: 1;/*显示多少行*/
    }

 常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。