前端笔记基础-（去掉图片底部的空白缝隙，添加文字尾部的省略号）

一、去掉底部白色空隙

1.使用vertical-align: middle;属性可以去掉底部空隙

2.也可以使用转为块级元素也可完成，不推荐 

二、添加文字尾部的省略号

代码及注释如下

/* 单行文字省略号 */
      .box2 {
        /*表示文字自动换行*/
        /* white-space: normal; */
        /*表示文字无法自动换行，强制显示在一行溢出*/
        white-space: nowrap;
        /* 将文字显示溢出的部分隐藏起来 */
        overflow: hidden;
        /* 表示将文字溢出的时候用省略号显示 */
        text-overflow: ellipsis;
      }
      /* 多行文字省略号，兼容性较差 */
      .box3 {
        /* 将文字显示溢出的部分隐藏起来 */
        overflow: hidden;
        /* 表示将文字溢出的时候用省略号显示 */
        text-overflow: ellipsis;
        /* 弹性伸缩盒子模型显示 */
        display: -webkit-box;
        /* 限制在一个块元素显示的文本行数 */
        -webkit-line-clamp: 3;
        /* 设置或检索伸缩盒子对象的子元素排列方式 */
        -webkit-box-orient: vertical;
      }