前言

前端開(kāi)發(fā)的時(shí)候，經(jīng)常會(huì)遇到需要一行文本顯示或者多行文本顯示，這種實(shí)現(xiàn)方法使用js也可以做到，但是無(wú)疑增加了開(kāi)發(fā)成本，能用css實(shí)現(xiàn)的效果，就當(dāng)然不會(huì)再去使用復(fù)雜的js進(jìn)行計(jì)算了。

解決方法

原文字展示效果

全部文字展示效果

一、單行溢出處理

css樣式

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

html

<h4>2. 單行溢出</h4>
<div class="container single_line">
為推動(dòng)湖北企業(yè)復(fù)工復(fù)產(chǎn)，助力湖北地區(qū)經(jīng)濟(jì)快速?gòu)?fù)蘇，
百度打造12小時(shí)直播， 以“寶藏湖北”為核心，選取9個(gè)城市9個(gè)主人公，帶出湖北不止有美食，
還有更多美好值得關(guān)注的核心信息。 2020年5月27日，百度APP12小時(shí)慢直播。
帶你探索，寶藏湖北和湖北好物背后的故事。
</div>

效果

二、多行溢出處理

css樣式

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

html

<h4>3. 多行溢出 (限制3行)</h4>
<div class="container multiple_line">
為推動(dòng)湖北企業(yè)復(fù)工復(fù)產(chǎn)，助力湖北地區(qū)經(jīng)濟(jì)快速?gòu)?fù)蘇，
百度打造12小時(shí)直播， 以“寶藏湖北”為核心，選取9個(gè)城市9個(gè)主人公，帶出湖北不止有美食，
還有更多美好值得關(guān)注的核心信息。 2020年5月27日，百度APP12小時(shí)慢直播。
帶你探索，寶藏湖北和湖北好物背后的故事。
</div>

效果

注意：僅適用于webkit內(nèi)核的瀏覽器，如chrome，android手機(jī)瀏覽器

三、多行溢出兼容

由于方法二存在兼容性問(wèn)題，所以又出現(xiàn)一種兼容的解決方案，主要是使用偽元素+定位的方式，相對(duì)較為復(fù)雜一點(diǎn)

css

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

html

<h4>4. 解決多行兼容問(wèn)題</h4>
<div class="container multiple_line_compat">
為推動(dòng)湖北企業(yè)復(fù)工復(fù)產(chǎn)，助力湖北地區(qū)經(jīng)濟(jì)快速?gòu)?fù)蘇，
百度打造12小時(shí)直播， 以“寶藏湖北”為核心，
選取9個(gè)城市9個(gè)主人公，帶出湖北不止有美食，
還有更多美好值得關(guān)注的核心信息。
 2020年5月27日，百度APP12小時(shí)慢直播。
帶你探索，寶藏湖北和湖北好物背后的故事。
</div>

效果