[移动web]超出文字省略号显示text-overflow

一.标签内单行文字时

• 1.仅适用 text-overflow: ellipsis; 时,无法实现省略号效果

<p style="width: 100px; text-overflow: ellipsis; background:#0fa;">单行实验体,用来给大家演示</p>

效果如图:

Snip20170817_1.png

分析:可能是因为文字超出宽度会自动换行
解决方式: 禁止换行white-space: nowrap

• 2.使用text-overflow: ellipsis; white-space: nowrap;,依旧无法实现省略号效果

<p style="width: 100px; text-overflow: ellipsis; white-space: nowrap; background:#0fa;">单行实验体,用来给大家演示</p>

效果如果:

Snip20170817_2.png
分析: 超出元素部分需要隐藏
解决方式:overflow:hidden

• 3. 使用text-overflow: ellipsis; white-space: nowrap; overflow: hidden;, 3个条件才实现了效果

<p style="width: 100px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; background:#0fa;">单行实验体,用来给大家演示</p>

效果如图:

Snip20170817_3.png

二.标签内多行文字时

• 1.去掉white-space: nowrap;,添加height: 100px;line-height:50px;,使标签展示两行文字.效果无法实现

<p style="width: 100px; height: 100px; background:#fa0; line-height:50px; text-overflow: ellipsis; overflow: hidden">我是一匹来自北方的狼,孤独的走在旷野中,凄厉的北风吹过,漫漫的黄沙掠过</p>

效果如图:

Snip20170817_4.png

思考分析: 强行结合一行展示,分标签搞定

• 2.n行展示,分标签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

分析:虽然实现了,但是太low了

• 3.最终方案: 结合webkitbox实现,在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

总结: 将单行的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学院单行带省略展示总结by董老师</p>
<p class="multipleLines">小码哥h5学院多行带省略展示总结by董老师,这是移动web的前置知识</p>

效果如图:

Snip20170817_8.png

补充说明:-webkit-line-clamp

-webkit-line-clamp 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他外来的WebKit属性。常见结合属性：
display: -webkit-box;
必须结合的属性
，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient
必须结合的属性
，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow，可以用来多行文本的情况下，用省略号“...”隐藏超出范围的文本 。