css文字溢出省略号显示

单行文字溢出省略号显示

步骤：

1.强制文字一行显示

white-space: nowrap;

2.溢出部分隐藏起来

   overflow: hidden；

3.文字溢出的时候用省略号显示

   text-overflow: ellipsis;

效果：

样式：

 .ov-es{
     
            margin: 100px auto;
            width: 100px;
            height: 50px;
            background-color: orange;
            /* 1.强制文字一行显示 */
            white-space: nowrap;
            /* 2.溢出部分隐藏起来 */
            overflow: hidden;
            /* 3.文字溢出的时候用省略号显示 */
            text-overflow: ellipsis;
        }

代码：

    
    
    
    


    
"ov-es">此处省略100个文字，用省略号显示

多行文字溢出省略号显示

步骤：

1.溢出部分隐藏起来

overflow: hidden;

2.溢出部分用省略号显示

text-overflow: ellipsis;

3.让普通盒子变成弹性伸缩盒子

 display: -webkit-box;

4.第几行显示省略号

 -webkit-line-clamp: 2;

5.设置弹性伸缩盒子的子元素的排列方式

 -webkit-box-orient: vertical;

效果：

样式：

在这里插入代码片  .ov-es{
     
            margin: 100px auto;
            width: 100px;
            height: 44px;
            background-color: orange;
            /* 1.溢出部分隐藏起来 */
            overflow: hidden;
            /* 2.溢出部分用省略号显示 */
            text-overflow: ellipsis;
            /* 3/让普通盒子变成弹性伸缩盒子 */
            display: -webkit-box;
            /* 4.第几行显示省略号 */
            -webkit-line-clamp: 2;
            /* 5.设置弹性伸缩盒子的子元素的排列方式 */
            -webkit-box-orient: vertical;
        }

代码：

    
    
    
    


    
"ov-es">此处省略100个文字，用省略号显示