【CSS基础】文字内容溢出处理

前言

前端开发的时候，经常会遇到需要一行文本显示或者多行文本显示，这种实现方法使用js也可以做到，但是无疑增加了开发成本，能用css实现的效果，就当然不会再去使用复杂的js进行计算了。

解决方法

原文字展示效果

全部文字展示效果

一、单行溢出处理

css样式

      .single_line {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

html

2. 单行溢出

为推动湖北企业复工复产，助力湖北地区经济快速复苏，
百度打造12小时直播， 以“宝藏湖北”为核心，选取9个城市9个主人公，带出湖北不止有美食，
还有更多美好值得关注的核心信息。 2020年5月27日，百度APP12小时慢直播。
带你探索，宝藏湖北和湖北好物背后的故事。

效果

二、多行溢出处理

css样式

      .multiple_line {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }

html

3. 多行溢出 (限制3行)

为推动湖北企业复工复产，助力湖北地区经济快速复苏，
百度打造12小时直播， 以“宝藏湖北”为核心，选取9个城市9个主人公，带出湖北不止有美食，
还有更多美好值得关注的核心信息。 2020年5月27日，百度APP12小时慢直播。
带你探索，宝藏湖北和湖北好物背后的故事。

效果

注意：仅适用于webkit内核的浏览器，如chrome，android手机浏览器

三、多行溢出兼容

由于方法二存在兼容性问题，所以又出现一种兼容的解决方案，主要是使用伪元素+定位的方式，相对较为复杂一点

css

      .multiple_line_compat::after {
        content: '...';
        position: absolute;
        line-height: 20px;
        height: 20px;
        right: 10px;
        bottom: 0;
        background-color: #fff;
      }

html

4. 解决多行兼容问题

为推动湖北企业复工复产，助力湖北地区经济快速复苏，
百度打造12小时直播， 以“宝藏湖北”为核心，
选取9个城市9个主人公，带出湖北不止有美食，
还有更多美好值得关注的核心信息。
 2020年5月27日，百度APP12小时慢直播。
带你探索，宝藏湖北和湖北好物背后的故事。

效果