高级css-溢出的文字省略号显示

1.单行文本溢出显示省略号

必须满足三个条件：

1）先强制一行内显示文本

2）超出的部分隐藏

3）文字省略号替代超出部分

<style>
        div {
            width: 150px;
            height: 80px;
            background-color: pink;
            margin: 100px auto;
            /* 这个单词的意思是如果文字显示不开自动换行 */
            /* white-space: normal; */
            /* 1.这个单词的意思是如果文字显示不开 也必须强制一行内显示 */
            white-space: nowrap;
            /* 2.溢出的部分隐藏起来 */
            overflow: hidden;
            /* 3.文字溢出的时候用省略号来显示 */
            text-overflow: ellipsis;
        }
    </style>

2.多行文本溢出显示省略号

多行文本溢出显示省略号，有比较大的兼容性问题，适合webKit浏览器或者移动端（移动端大部分是webkit内核）

<style>
        div {
            width: 150px;
            height: 80px;
            background-color: purple;
            margin: 100px auto;
            overflow: hidden;
            text-overflow: ellipsis;
            /* 弹性伸缩盒子模型显示 */
            display: -webkit-box;
            /* 限制在一个块元素显示的文本的行数 */
            -webkit-line-clamp: 2;
            /* 设置或检索伸缩盒对象的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }
    </style>

 

更推荐让后台人员来做这个效果，因为后台人员可以设置显示多少字，操作更简单。