html5文本溢出应该怎么处理？

一共有三种方法，分别是：

单行文本溢出
实现方法：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;  (强制文本文本一行)

效果如图：

多行文本溢出

实现方法1：

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
 overflow: hidden;
 text-overflow:ellipsis;

效果如图：

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端。
注：

1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2. display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
3. -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式
4. 兼容性差
   实现方法2：

兼容性比较好 用伪元素…加在盒子末尾

.box2 {
            position: relative;
            width: 150px;
            /* 高度是行高的倍数 显示几行就是几倍数 */
            line-height: 30px;
            height: 90px;
            border: 1px solid red;
            overflow: hidden;
          
        }
        .box2:after {
            content: '...';
            position: absolute;
            right: 0px;
            bottom:0;
            padding-left: 20px;

        }
<h3>方法2</h3>
    <div class="box2">
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
        海边度假穿搭指南！一件泳衣赚足回头率
    </div>

效果如图：

精灵图技术（sprites雪碧）

前端图片优化技巧之一
精灵图：多张小图拼合成一张大图
精灵图技术原理：用背景属性插入精灵图 ，用background-position属性移动图片的位置，把想要显示的图片部分显示在大小固定的盒子里。

优点：

1. 减少http请求次数 ，提高代码加载的速度
2. 易替换整体风格
   缺点：需要测量