挪动端text

日期:2020-09-30 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

大伙儿应当都了解用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

 });

});

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