一.標簽內(nèi)單行文字時

• 1.僅適用 text-overflow: ellipsis; 時,無法實現(xiàn)省略號效果

<p style="width: 100px; text-overflow: ellipsis; background:#0fa;">單行實驗體,用來給大家演示</p>

效果如圖:

Snip20170817_1.png

分析:可能是因為文字超出寬度會自動換行
解決方式: 禁止換行white-space: nowrap

• 2.使用text-overflow: ellipsis; white-space: nowrap;,依舊無法實現(xiàn)省略號效果

<p style="width: 100px; text-overflow: ellipsis; white-space: nowrap; background:#0fa;">單行實驗體,用來給大家演示</p>

效果如果:

Snip20170817_2.png

• 3. 使用text-overflow: ellipsis; white-space: nowrap; overflow: hidden;, 3個條件才實現(xiàn)了效果

<p style="width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background:#0fa;">單行實驗體,用來給大家演示</p>

效果如圖:

Snip20170817_3.png

二.標簽內(nèi)多行文字時

• 1.去掉white-space: nowrap;,添加height: 100px;line-height:50px;,使標簽展示兩行文字.效果無法實現(xiàn)

<p style="width: 100px; height: 100px; background:#fa0; line-height:50px; text-overflow: ellipsis; overflow: hidden">我是一匹來自北方的狼,孤獨的走在曠野中,凄厲的北風吹過,漫漫的黃沙掠過</p>

效果如圖:

Snip20170817_4.png

思考分析: 強行結(jié)合一行展示,分標簽搞定

• 2.n行展示,分標簽n個,并且只在最后一行展示省略號即可,生硬實現(xiàn)

<p style="width: 100px;">
    <p style="background:#fa0; margin: 0; width: 100px;height: 50px;line-height: 50px;">我是一匹來自</p>
    <p style="background:#fa0; margin: 0; width: 100px; height: 50px; line-height:50px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap">北方的狼,孤獨的走在曠野中,凄厲的北風吹過,漫漫的黃沙掠過</p>
</p>

效果如圖:

Snip20170817_5.png

分析:雖然實現(xiàn)了,但是太low了

• 3.最終方案: 結(jié)合webkitbox實現(xiàn),在2.1方案中,添加三個樣式display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;

<p style="width: 100px; height: 100px; background:#fa0; line-height:50px; text-overflow: ellipsis; overflow: hidden;
display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;">我是一匹來自北方的狼,孤獨的走在曠野中,凄厲的北風吹過,漫漫的黃沙掠過</p>

效果如圖:

Snip20170817_6.png

總結(jié): 將單行的white-space: nowrap;,使用多行-webkit-line-clamp: n;替代

核心代碼css部分如下:

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

            width: 200px;
            background-color: #0fa;
        }
        .multipleLines{
            text-overflow: ellipsis;

            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; // 此處2代表兩行,

            overflow: hidden;


            width: 200px;
            background-color: #0fa;
        }

html中使用案例:

<p class="singleLine">小碼哥h5學院單行帶省略展示總結(jié)by董老師</p>
<p class="multipleLines">小碼哥h5學院多行帶省略展示總結(jié)by董老師,這是移動web的前置知識</p>

效果如圖:

Snip20170817_8.png

補充說明:-webkit-line-clamp

-webkit-line-clamp 是一個 不規(guī)范的屬性（unsupported WebKit property）鸦列，它沒有出現(xiàn)在 CSS 規(guī)范草案中。
限制在一個塊元素顯示的文本的行數(shù)鹏倘。 為了實現(xiàn)該效果薯嗤，它需要組合其他外來的WebKit屬性。常見結(jié)合屬性：
display: -webkit-box;
必須結(jié)合的屬性
纤泵，將對象作為彈性伸縮盒子模型顯示 骆姐。
-webkit-box-orient
必須結(jié)合的屬性
，設置或檢索伸縮盒對象的子元素的排列方式 捏题。
text-overflow玻褪，可以用來多行文本的情況下，用省略號“...”隱藏超出范圍的文本 涉馅。