挪动端text

大伙儿应当都了解用text-overflow:ellipsis特性来完成单写作本的外溢显示信息省略号(…)。自然一部分访问器还必须加宽度width特性。

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

可是这个特性其实不适用多写作本外溢显示信息省略号，这里依据运用情景详细介绍几个方式来完成这样的实际效果。

WebKit访问器或挪动端网页页面

在WebKit访问器或挪动端（绝绝大多数是WebKit核心的访问器）的网页页面完成较为简易，能够立即应用WebKit的CSS拓展特性(WebKit是独享特性)-webkit-line-clamp ；留意：这是1个 不标准的特性（unsupported WebKit property），它沒有出現在 CSS 标准草案中。

-webkit-line-clamp用来限定在1个块元素显示信息的文字的行数。 以便完成该实际效果，它必须组成别的的WebKit特性。

普遍融合特性：

• display: -webkit-box; 务必融合的特性 ，将目标做为延展性伸缩盒子实体模型显示信息 。
• -webkit-box-orient 务必融合的特性 ，设定或查找伸缩盒目标的子元素的排序方法 。
• text-overflow: ellipsis;，能够用来多写作本的状况下，用省略号“…”掩藏超过范畴的文字 。

overflow : hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

这个特性较为适合WebKit访问器或挪动端（绝绝大多数是WebKit核心的）访问器。

跨访问器适配的计划方案

较为可靠简易的做法便是设定相对性精准定位的器皿高宽比，用包括省略号(…)的元素仿真模拟完成；

比如：

p {

    position:relative;

    line-height:1.4em;

    /* 3 times the line-height to show 3 lines */

    height:4.2em;

    overflow:hidden;

}

p::after {

    content:"...";

    font-weight:bold;

    position:absolute;

    bottom:0;

    right:0;

    padding:0 20px 1px 45px;

    background:url(http://www.css88.com/wp-content/uploads/2014/09/ellipsis_bg.png) repeat-y;

}

这里留意几点：

1. height高宽比真好是line-height的3倍；
2. 完毕的省略功能强大了半全透明的png做了减淡的实际效果，或设定情况色调；
3. IE6⑺无法显示content內容，因此要适配IE6⑺能够是在內容中添加1个标识，例如用<span class="line-clamp">...</span>去仿真模拟；
4. 要适用IE8，必须将::after更换成:after；

JavaScript 计划方案

用js还可以依据上面的思路去仿真模拟，完成也很简易，强烈推荐几个做相近工作中的完善小专用工具：

1.Clamp.js

免费下载及文本文档详细地址：https://github.com/josephschmitt/Clamp.js

应用也十分简易：

var module = document.getElementById("clamp-this-module");

$clamp(module, {clamp: 3});

2.jQuery软件-jQuery.dotdotdot

这个应用起来也很便捷：

$(document).ready(function() {

 $("#wrapper").dotdotdot({

     //    configuration goes here

 });

});

以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。