10_h5是如何做移動(dòng)端適配的熄求？折行的時(shí)候如何實(shí)現(xiàn)不斷行

一片任、百分比適配

1、要點(diǎn)

元素的寬度使用了百分比來定寬，根據(jù)屏幕的寬度進(jìn)行自適應(yīng)
適合頁面內(nèi)容結(jié)構(gòu)均勻分配,固定高度,結(jié)構(gòu)不是很復(fù)雜,注意要設(shè)置viewport視口內(nèi)容寬度等于設(shè)備的寬度
使用百分比定寬的元素朋截，百分比參考的是該元素最近的蛹稍，定了寬度的父元素

2、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>固定高度,寬度自適應(yīng),100%比做適配</title>
    <style type="text/css">
             *{
                padding:0;
                margin:0;
            }
            body{
                font-size:16px;
                overflow:hidden;
                -webkit-box-sizing:border-box;
                box-sizing:border-box; 
            }
            /*left start*/
            .left{
                width:40px;        /*兩邊固定寬度,中間自適應(yīng)*/
                height:40px;       /*高度可以不加,由內(nèi)容填充*/
                position:absolute;
                left:0;
                top:0;
                background:red;
                text-align:center;
                line-height:40px;
             }
             /*left end*/
             /*center start*/
             .center{
                width:100%;        /*寬度不固定*/
                background:orange;
                height:40px; 
                margin-left:40px;
             }
             .center input{
                width:100%;
                height:40px;
                outline:none;
             }
             /*center end*/
             /*right start*/
             .right{
                width:40px;       /*兩邊固定寬度,中間自適應(yīng)*/
                height:40px;      /*高度可以不可,由內(nèi)容填充*/
                text-align:center;
                line-height:40px;
                position:absolute;
                right:0;
                top:0;
                background:green;
             }
               /*right end*/
               /*banner adv start*/
             .banner{
                width:100%;
                height:200px;
                background:pink;
                text-align:center;
                line-height:200px;
             }
             /*banner adv end*/
             /*list start*/
             .list{
                overflow:hidden;
             }   
             .list div{
                 width:20%;
                 height:90px;
                 float:left;
                 text-align:center;
                 line-height:90px;
             }
             .list div:nth-of-type(1){
                background:orange;
             }
             .list div:nth-of-type(2){
                background:#80B3FF;
             }
             .list div:nth-of-type(3){
                background:#1BA260;
             }
             .list div:nth-of-type(4){
                background:#F2A196;
             }
             .list div:nth-of-type(5){
                background:#FFCE42;
             }
             .listTwo{
                margin:15px 0 0 0;
             }
               /*list end*/
               /*con start*/
             .con{
                width:100%;
                height:200px;
                overflow:hidden;     /*子元素使用來浮動(dòng),父元素記得清除浮動(dòng)*/
                text-align:center;
                line-height:200px;
             }
             .left-80{
                width:80%;
                height:100%;  /*想要一個(gè)元素在頁面中顯示必須得給元素高度,繼承父元素*/
                float:left;
                background:#B0E24A;
             }
             .right-20{
                width:20%;
                height:100%; /*高度100%,繼承父元素的高度*/
                float:right;
                background:#6C6863;
             }
             /*con end*/

    </style>
</head>
<body>
      <!-- header start -->
      <header>
            <div class="left">左邊</div>
            <div class="center">
                <form>
                     <input type="search" name="">
                </form>
            </div>
            <div class="right">右邊</div>
      </header>
      <!-- header end -->
      <!-- banner adv start -->
      <div class="banner">adv</div>
      <!-- banner adv end -->
      <!-- 列表list start -->
      <div class="list">
            <div>1</div> 
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>  
      </div>
      <div class="list listTwo">
            <div>6</div> 
            <div>7</div>
            <div>8</div>
            <div>9</div>
            <div>10</div>  
      </div>
       <!-- 列表list end -->
      <!-- con內(nèi)容開始-->
      <div class="con">
            <div class="left-80">左邊80%</div>
            <div class="right-20">右邊20%</div>
      </div>
      <!-- con內(nèi)容結(jié)束-->
</body>
</html>

二质和、@media 媒體查詢適配

1稳摄、CSS 語法

（1）@media 媒體類型 and （媒體特性）{ 你的樣式 }

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

（2）針對(duì)不同的媒體使用不同 stylesheets

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

2、媒體查詢功能

（1）最大寬度max-width

“max-width”是媒體特性中最常用的一個(gè)特性饲宿，其意思是指媒體類型小于或等于指定的寬度時(shí)厦酬，樣式生效。如：

@media screen and (max-width:480px){
 .ads {
   display:none;
  }
}

上面表示的是：當(dāng)屏幕小于或等于480px時(shí),頁面中的廣告區(qū)塊（.ads）都將被隱藏瘫想。

（2）最小寬度min-width

“min-width”與“max-width”相反仗阅，指的是媒體類型大于或等于指定寬度時(shí)，樣式生效国夜。

@media screen and (min-width:900px){
    .wrapper {width: 980px;}
}

上面表示的是：當(dāng)屏幕大于或等于900px時(shí)减噪，容器“.wrapper”的寬度為980px。

（3）多個(gè)媒體特性使用

Media Queries可以使用關(guān)鍵詞"and"將多個(gè)媒體特性結(jié)合在一起车吹。也就是說筹裕，一個(gè)Media Query中可以包含0到多個(gè)表達(dá)式，表達(dá)式又可以包含0到多個(gè)關(guān)鍵字窄驹，以及一種媒體類型朝卒。

當(dāng)屏幕在600px~900px之間時(shí)，body的背景色渲染為“#f5f5f5”乐埠，如下所示抗斤。

@media screen and (min-width:600px) and (max-width:900px){
  body {background-color:#f5f5f5;}
}

（4）設(shè)備屏幕的輸出寬度Device Width

在智能設(shè)備上，例如iPhone丈咐、iPad等瑞眼，還可以根據(jù)屏幕設(shè)備的尺寸來設(shè)置相應(yīng)的樣式（或者調(diào)用相應(yīng)的樣式文件）。同樣的棵逊，對(duì)于屏幕設(shè)備同樣可以使用“min/max”對(duì)應(yīng)參數(shù)伤疙，如“min-device-width”或者“max-device-width”。

<link rel="stylesheet" media="screen and (max-device-width:480px)" href="iphone.css" />

上面的代碼指的是“iphone.css”樣式適用于最大設(shè)備寬度為480px辆影，比如說iPhone上的顯示掩浙，這里的“max-device-width”所指的是設(shè)備的實(shí)際分辨率，也就是指可視面積分辨率秸歧。

（5）not關(guān)鍵詞

使用關(guān)鍵詞“not”是用來排除某種制定的媒體類型厨姚，也就是用來排除符合表達(dá)式的設(shè)備。換句話說键菱，not關(guān)鍵詞表示對(duì)后面的表達(dá)式執(zhí)行取反操作谬墙，如：

@media not print and (max-width: 1200px){樣式代碼}

上面代碼表示的是：樣式代碼將被使用在除打印設(shè)備和設(shè)備寬度小于1200px下所有設(shè)備中今布。

（6）only關(guān)鍵詞

only用來指定某種特定的媒體類型，可以用來排除不支持媒體查詢的瀏覽器拭抬。其實(shí)only很多時(shí)候是用來對(duì)那些不支持Media Query但卻支持Media Type的設(shè)備隱藏樣式表的部默。

其主要有：支持媒體特性的設(shè)備，正常調(diào)用樣式造虎，此時(shí)就當(dāng)only不存在傅蹂；表示不支持媒體特性但又支持媒體類型的設(shè)備，這樣就會(huì)不讀樣式算凿，因?yàn)槠湎葧?huì)讀取only而不是screen份蝴；另外不支持Media Queries的瀏覽器，不論是否支持only氓轰，樣式都不會(huì)被采用婚夫。如

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" />

在Media Query中如果沒有明確指定Media Type，那么其默認(rèn)為all署鸡，如：

<link rel="stylesheet" media="(min-width:701px) and (max-width:900px)" href="mediu.css" />

另外在樣式中案糙，還可以使用多條語句來將同一個(gè)樣式應(yīng)用于不同的媒體類型和媒體特性中，指定方式如下所示靴庆。

<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-width:480px), screen and (min-width:960px)" />

3时捌、移動(dòng)端適配用法

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

/*iphone4*/
@media only screen and (max-width: 320px) and (max-width: 480px) {
    html, body {
        font-size: 12px;
    }
    .title {
        background-color: red;
    }
}
/*iphone5*/
@media only screen and (max-width: 320px) and (min-height: 568px) {
    html,body {
        font-size: 14px;
    }
    .title {
        background-color: blue;
    }
}
/*ihpne6,7,8*/
@media only screen and (min-width: 375px) and (max-width: 413px) {
    html,body {
        font-size: 16px;
    }
    .title {
        background-color: green;
    }
}
/*ihpne6,7,8Plus*/
@media only screen and (min-width: 414px) and (max-width: 640px) {
    html,body {
        font-size: 18px;
    }
    .title {
        background-color: pink;
    }
}

三、Flex布局適配

適合頁面內(nèi)容結(jié)構(gòu)均勻分配,固定高度,需要設(shè)置viewport視口內(nèi)容寬度等于設(shè)備寬度
老版本的display:box與新版本的display:flex都可以實(shí)現(xiàn)頁面的自適應(yīng)

1炉抒、新老版本語法對(duì)比

2奢讨、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>Flex布局適配</title>
    <style type="text/css">
*{
    padding:0;
    margin:0;
}
body{
    font-family:"微軟雅黑";
    font-size:16px;
}
.parent{
    display:-webkit-flex;     /*聲明彈性盒模型*/
    display:flex; 
}
.left,.right{
    width:40px;
    height:40px;
    text-align:center;
    line-height:40px;
}
.left{
    background:#abcdef;
}
.right{
    background:#DD4F43;
}
.center{
    -webkit-flex:1; /*一定要注意加上瀏覽器前綴,否則就會(huì)失效*/
    flex:1;
}
.center input{
    width:100%;
    height:40px;
    outline:none;
}
.banner-adv{
    width:100%;
    height:200px;
    display:-webkit-box;
    display:box;
    background:#0D6CB0;
}
.list{
    width:100%;
    height:90px;
    display:-webkit-flex;
    display:flex;
}
.list div{
    -webkit-flex:1;
    flex:1;
    text-align:center;
    line-height:90px;
}
.list div:nth-of-type(1){
    background:#DE5246;
}
.list div:nth-of-type(2){
    background:#19A25F;
}
.list div:nth-of-type(3){
    background:#FF8080;
}
.list div:nth-of-type(4){
    background:#F4CD0B;
}
.list div:nth-of-type(5){
    background:#9EDA45;
}
.list-Two{
    margin:15px 0 0 0;
}
.list-Two div:nth-of-type(1){
    background:#B847FF;
}
.list-Two div:nth-of-type(2){
    background:#79B900;
}
.list-Two div:nth-of-type(3){
    background:#FF2424;
}
.list-Two div:nth-of-type(4){
    background:#D2E4F0;
}
.list-Two div:nth-of-type(5){
    background:#4CDF2B;
}
.con{
    height:200px;
    display:-webkit-flex;  /*聲明彈性盒模型*/
    display:flex;
}
.con div:nth-of-type(1){
    -webkit-flex:8;   /*根據(jù)父元素分成8等分,占80%*/
    flex:8;
    background:#80B3FF;
}
.con div:nth-of-type(2){
    -webkit-flex:2;   /*根據(jù)父元素分成2等分,占20%*/
    flex:2;
    background:#CD8B37;
}

    </style>
</head>
<body>
      <header class="parent">
              <div class="left">左邊</div>
              <div class="center">
                    <form>
                         <input type="search" name="">
                    </form>
              </div>
              <div class="right">右邊</div>
        </header>
        <div class="banner-adv"></div>
        <section class="list">
               <div>1</div>
               <div>2</div>
               <div>3</div>
               <div>4</div>
               <div>5</div>
        </section>
        <section class="list list-Two">
               <div>6</div>
               <div>7</div>
               <div>8</div>
               <div>9</div>
               <div>9</div>
        </section>
        <div class="con">
             <div></div>
             <div></div>
        </div>
</body>
</html>

四、動(dòng)態(tài) rem 方案

1端礼、rem/em/vw/vh的比較

（1）em

em作為font-size的單位時(shí)禽笑，其代表父元素的字體大小入录，em作為其他屬性單位時(shí)蛤奥，代表自身字體大小——MDN

比如父元素font-size:12px;

自身元素如果寫成：font-sise:2em;則自身元素用px表示就是24px（相對(duì)父元素字體大小）;

但是自身元素設(shè)置：width:2em,那么自身元素用px表示就是48px（相對(duì)自身字體大辛鸥濉）凡桥；

（2）rem

rem作用于非根元素時(shí)，相對(duì)于根元素字體大惺赐缅刽；rem作用于根元素字體大小時(shí)，相對(duì)于其出初始字體大小——MDN

比如根元素（html）設(shè)置font-size=12px; 非根元素設(shè)置width:2rem;則換成px表示就是24px蠢络；

如果根元素設(shè)置成font-size=1rem;則根元素?fù)Q成px就是相對(duì)于初始字體大小衰猛，一般是12px；

（3）vm/vh

vw ：視口寬度的 1/100刹孔；vh ：視口高度的 1/100 —— MDN

在pc端啡省，視口寬高就是瀏覽器得寬高；

在移動(dòng)端，這個(gè)還不太一樣卦睹，不過一般設(shè)置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

代碼以顯示網(wǎng)頁的屏幕寬度定義了視窗寬度畦戒。網(wǎng)頁的比例和最大比例被設(shè)置為100%。

2结序、剖析rem布局原理

其實(shí)好好理解上面的概念障斋，rem的原理也就很簡(jiǎn)單了。

假設(shè)我們將屏幕平局分為10份徐鹤，每一份寬度用一個(gè)a表示垃环，即a=屏幕寬度/10，那么：

div {width: 5a} /* 屏幕寬度的50% */

但是css中沒有a這個(gè)單位凳干，這時(shí)我們可以借助rem代替上面的a晴裹。如：

html {font-size: 12px}
div {width: 2rem} /* 24px*/
 
html {font-size: 16px}
div {width: 2rem} /* 32px*/

新的問題來？怎么讓html元素字體大小恒等于屏幕的1/10呢救赐？如ipone6寬是375px,font-size:37.5px;

html {fons-size: width / 10}
div {width: 5rem} /* 5rem = 5a = 屏幕寬度的50% */

我們用js很容易動(dòng)態(tài)的設(shè)置html的font-size恒等屏幕的1/10;我們可以在頁面dom ready涧团、resize和屏幕旋轉(zhuǎn)中設(shè)置：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';

如何把設(shè)計(jì)稿的像素單位換成以rem為單位？可以用一個(gè)比例來計(jì)算：如設(shè)計(jì)稿寬度為750px经磅，某個(gè)元素量得75px泌绣，那么：

75px/750px = 計(jì)算所得rem/10rem,所以計(jì)算所得rem=75px;所以我們?cè)跇邮街袑憌idth:1rem；實(shí)際寬度是75px预厌；同理阿迈，如果設(shè)計(jì)稿總寬度是640px,則1rem=64px。

預(yù)處理函數(shù)可以簡(jiǎn)化：

$ue-width: 750; /* 設(shè)計(jì)稿圖的寬度 */
 
@function px2rem($px) {
  @return #{$px/$ue-width*10}rem;
}
 
div {
  width: px2rem(100);/*編譯后：  p{width:1.5625rem}*/
}

3轧叽、rem布局方案

rem是一種彈性布局苗沧，它強(qiáng)調(diào)等比縮放，100%還原炭晒。它和響應(yīng)式布局不一樣待逞，響應(yīng)式布局強(qiáng)調(diào)不同屏幕要有不同的顯示，比如媒體查詢网严。

最佳方案：rem+flexbox+js的方案

實(shí)現(xiàn)步驟：

引入相關(guān)flexible.js文件
根據(jù)設(shè)計(jì)圖計(jì)算元素rem值
切換不同移動(dòng)端視窗查看效果

示例1：網(wǎng)易考拉

地址：https://m.kaola.com/

(function(win) {
    var remCalc = {};
    var docEl = win.document.documentElement,
    tid;
    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        if (width > 640) {
            width = 640
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + "px";
        remCalc.rem = rem;
        var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);
        if (actualSize !== rem && actualSize > 0 && Math.abs(actualSize - rem) > 1) {
            var remScaled = rem * rem / actualSize;
            docEl.style.fontSize = remScaled + "px"
        }
    }
    function dbcRefresh() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 100)
    }
    win.addEventListener("resize",
    function() {
        dbcRefresh()
    },
    false);
    win.addEventListener("pageshow",
    function(e) {
        if (e.persisted) {
            dbcRefresh()
        }
    },
    false);
    refreshRem();
    remCalc.refreshRem = refreshRem;
    remCalc.rem2px = function(d) {
        var val = parseFloat(d) * this.rem;
        if (typeof d === "string" && d.match(/rem$/)) {
            val += "px"
        }
        return val
    };
    remCalc.px2rem = function(d) {
        var val = parseFloat(d) / this.rem;
        if (typeof d === "string" && d.match(/px$/)) {
            val += "rem"
        }
        return val
    };
    win.remCalc = remCalc
})(window); (function(win, doc) {
    var type = navigator.userAgent.match(/(iPhone|iPod|iPad)/i) ? "ios": "aos";
    win.deviceType = type
})(window, document);

示例2：

;(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if (clientWidth >= 750) {
                docEl.style.fontSize = '100px';
            } else {
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            }
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

五识樱、 css實(shí)現(xiàn)單行、多行文本超出顯示省略號(hào)

1震束、單行文本省略

<p class="ellipsis-line">在使用的時(shí)候怜庸，有時(shí)候發(fā)現(xiàn)不會(huì)出現(xiàn)省略標(biāo)記效果，經(jīng)過測(cè)試發(fā)現(xiàn)垢村，使用ellipsis的時(shí)候割疾，必須配合overflow:hidden; white-space:nowrap; width:具體值;這三個(gè)樣式共同使用才會(huì)有效果。</p>

.ellipsis-line {
    border: 1px solid #f70505;
    padding: 8px;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis; /*文本溢出顯示省略號(hào)*/
    white-space: nowrap;  /*文本不會(huì)換行*/
}

語法：text-overflow:clip/ellipsis;

默認(rèn)值：clip
適用于：所有元素
clip：當(dāng)對(duì)象內(nèi)文本溢出時(shí)不顯示省略標(biāo)記（...）嘉栓，而是將溢出的部分裁切掉宏榕。
ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）驰凛。

注：在使用的時(shí)候，有時(shí)候發(fā)現(xiàn)不會(huì)出現(xiàn)省略標(biāo)記效果担扑，經(jīng)過測(cè)試發(fā)現(xiàn)恰响，使用ellipsis的時(shí)候，必須配合overflow:hidden; white-space:nowrap; width:具體值;這三個(gè)樣式共同使用才會(huì)有效果涌献。

2胚宦、多行文本省略

（1）直接用css屬性-webkit-line-clamp：n;設(shè)置

在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁面實(shí)現(xiàn)比較簡(jiǎn)單，可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp 燕垃；注意：這是一個(gè) 不規(guī)范的屬性（unsupported WebKit property）枢劝，它沒有出現(xiàn)在 CSS 規(guī)范草案中。

-webkit-line-clamp用來限制在一個(gè)塊元素顯示的文本的行數(shù)卜壕。為了實(shí)現(xiàn)該效果您旁，它需要組合其他的WebKit屬性。常見結(jié)合屬性：

display: -webkit-box; 必須結(jié)合的屬性轴捎，將對(duì)象作為彈性伸縮盒子模型顯示鹤盒。
-webkit-box-orient 必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對(duì)象的子元素的排列方式侦副。
text-overflow: ellipsis;侦锯，可以用來多行文本的情況下，用省略號(hào)“…”隱藏超出范圍的文本秦驯。

這個(gè)屬性只合適WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的）瀏覽器

<p class="multi-line">在WebKit瀏覽器或移動(dòng)端（絕大部分是WebKit內(nèi)核的瀏覽器）的頁面實(shí)現(xiàn)比較簡(jiǎn)單尺碰，可以直接使用WebKit的CSS擴(kuò)展屬性(WebKit是私有屬性)-webkit-line-clamp ；注意：這是一個(gè) 不規(guī)范的屬性（unsupported WebKit property）译隘，它沒有出現(xiàn)在 CSS 規(guī)范草案中亲桥。</p>

.multi-line {
    border: 1px solid #f70505;
    width: 400px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

效果優(yōu)點(diǎn)：

響應(yīng)式截?cái)啵鶕?jù)不同寬度做出調(diào)整
文本超出范圍才顯示省略號(hào)固耘，否則不顯示省略號(hào)
瀏覽器原生實(shí)現(xiàn)题篷，所以省略號(hào)位置顯示剛好

但是缺點(diǎn)也是很直接，因?yàn)?-webkit-line-clamp 是一個(gè)不規(guī)范的屬性玻驻，它沒有出現(xiàn)在 CSS 規(guī)范草案中悼凑。也就是說只有 webkit 內(nèi)核的瀏覽器才支持這個(gè)屬性偿枕，像 Firefox, IE 瀏覽器統(tǒng)統(tǒng)都不支持這個(gè)屬性璧瞬，瀏覽器兼容性不好。

使用場(chǎng)景：多用于移動(dòng)端頁面渐夸，因?yàn)橐苿?dòng)設(shè)備瀏覽器更多是基于 webkit 內(nèi)核嗤锉，除了兼容性不好，實(shí)現(xiàn)截?cái)嗟男Ч诲e(cuò)墓塌。

（2）利用定位和偽類元素

p {
    position: relative; 
    width:400px;
    line-height: 20px; 
    max-height: 60px;
    overflow: hidden;
}
p::after {
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(right, transparent, #fff 55%);
    background: -moz-linear-gradient(right, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

適合場(chǎng)景：文字內(nèi)容較多瘟忱，確定文字內(nèi)容一定會(huì)超過容器的奥额，那么選擇這種方式不錯(cuò)。但文字未超出行的情況下也會(huì)出現(xiàn)省略號(hào),可結(jié)合js優(yōu)化該方法访诱。
注：

將height設(shè)置為line-height的整數(shù)倍垫挨，防止超出的文字露出。
給p::after添加漸變背景可避免文字只顯示一半触菜。
由于ie6-7不顯示content內(nèi)容九榔，所以要添加標(biāo)簽兼容ie6-7（如：<span>…<span/>）；兼容ie8需要將::after替換成:after涡相。

（3）結(jié)合js優(yōu)化代碼

css:

p {
    position: relative;
    width: 400px;
    line-height: 20px;
    overflow: hidden;

}
.p-after:after {
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px;
    background: -webkit-linear-gradient(left, transparent, #fff 55%);
    background: -moz-linear-gradient(left, transparent, #fff 55%);
    background: -o-linear-gradient(left, transparent, #fff 55%);
    background: linear-gradient(to right, transparent, #fff 55%);
}

js:

<script src="https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js"></script>
<script>
$(function(){
 //獲取文本的行高哲泊，并獲取文本的高度，假設(shè)我們規(guī)定的行數(shù)是五行催蝗，那么對(duì)超過行數(shù)的部分進(jìn)行限制高度切威，并加上省略號(hào)
   $('p').each(function(i, obj){
        var lineHeight = parseInt($(this).css("line-height"));
        var height = parseInt($(this).height());
        if((height / lineHeight) >3 ){
            $(this).addClass("p-after")
            $(this).css("height","60px");
        }else{
            $(this).removeClass("p-after");
        }
    });
})
</script>

最后編輯于：2020.05.15 09:36:18

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市丙号，隨后出現(xiàn)的幾起案子先朦，更是在濱河造成了極大的恐慌，老刑警劉巖犬缨，帶你破解...
沈念sama閱讀 216,496評(píng)論 6贊 501
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件烙无，死亡現(xiàn)場(chǎng)離奇詭異，居然都是意外死亡遍尺，警方通過查閱死者的電腦和手機(jī)截酷，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,407評(píng)論 3贊 392
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來乾戏，“玉大人迂苛，你說我怎么就攤上這事」脑瘢” “怎么了三幻？”我有些...
開封第一講書人閱讀 162,632評(píng)論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長(zhǎng)呐能。經(jīng)常有香客問我念搬，道長(zhǎng)，這世上最難降的妖魔是什么摆出？我笑而不...
開封第一講書人閱讀 58,180評(píng)論 1贊 292
?港島之戀（遺憾婚禮）
正文為了忘掉前任朗徊，我火速辦了婚禮，結(jié)果婚禮上偎漫，老公的妹妹穿的比我還像新娘爷恳。我一直安慰自己，他們只是感情好象踊，可當(dāng)我...
茶點(diǎn)故事閱讀 67,198評(píng)論 6贊 388
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布温亲。她就那樣靜靜地躺著棚壁，像睡著了一般。火紅的嫁衣襯著肌膚如雪栈虚。梳的紋絲不亂的頭發(fā)上袖外，一...
開封第一講書人閱讀 51,165評(píng)論 1贊 299
城市分裂傳說
那天，我揣著相機(jī)與錄音魂务，去河邊找鬼在刺。笑死，一個(gè)胖子當(dāng)著我的面吹牛头镊，可吹牛的內(nèi)容都是我干的蚣驼。我是一名探鬼主播，決...
沈念sama閱讀 40,052評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼相艇，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼颖杏！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起坛芽，我...
開封第一講書人閱讀 38,910評(píng)論 0贊 274
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤留储，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后咙轩，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體获讳，經(jīng)...
沈念sama閱讀 45,324評(píng)論 1贊 310
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,542評(píng)論 2贊 332
?白月光啟示錄
正文我和宋清朗相戀三年活喊，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了丐膝。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點(diǎn)故事閱讀 39,711評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡钾菊，死狀恐怖帅矗，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情煞烫，我是刑警寧澤浑此，帶...
沈念sama閱讀 35,424評(píng)論 5贊 343
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站滞详，受9級(jí)特大地震影響凛俱，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜料饥，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,017評(píng)論 3贊 326
男人毒藥：我在死后第九天來索命
文/蒙蒙一蒲犬、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧稀火，春花似錦暖哨、人聲如沸赌朋。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,668評(píng)論 0贊 22
一樁弒父案篇裁，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至赡若，卻和暖如春达布，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背逾冬。一陣腳步聲響...
開封第一講書人閱讀 32,823評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工黍聂，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人身腻。一個(gè)月前我還...
沈念sama閱讀 47,722評(píng)論 2贊 368
代替公主和親
正文我出身青樓产还，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親嘀趟。傳聞我的和親對(duì)象是個(gè)殘疾皇子脐区，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,611評(píng)論 2贊 353

10_h5是如何做移動(dòng)端適配的瞻惋？折行的時(shí)候如何實(shí)現(xiàn)不斷行