单/多写作本加上省略号方式详解

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

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

1.单写作本加上省略号

1般用于新闻目录展现

li{
width: 200px;
height: 30px;
line-height: 30px;
cursor: pointer;
list-style-position: inside;/*将目录标志部位设定为inside,默认设置outside,overflow值为hidden时会截取掉*/
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

 小tip:为加上省略号的文字标识加上title特性,值为详细文字,当客户电脑鼠标滞留在该文字时,会显示信息详细內容。

关键编码:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

overflow 外溢

值:

visible:元素的內容在元素框以外也可见(外溢內容不被裁剪)

hidden:元素的內容会在元素框的界限处裁剪,而且超过裁剪地区的內容不能见

scroll:元素的內容会在元素框的界限处裁剪,但访问器会显示信息翻转条便于查询其余的內容

auto: 假如內容被裁剪,则访问器会显示信息翻转条便于查询其余的內容

inherit 

原始值:visible

运用于:块级元素、更换元素、表模块素

text-overflow 文字外溢

值:

clip:无法显示省略标识(...),只是简易的裁剪,非常于失效果

ellipsis:文字外溢时显示信息省略标识(...),省略标识插进的部位是最终1个标识符

原始值:cilp

运用于:块级元素、更换元素、表模块素

white-space 空白符

(空白符是指空格、制表符he回车;HTML默认设置将全部空白合乎并为1个空格)

值:

normal:合拼空白符,容许全自动换行

nowrap:合拼空白符,不容许全自动换行

pre-line:合拼空白符(不包含换行符),容许全自动换行

pre:不符合并空白符,不容许全自动换行

pre-wrap:不符合并空白符,容许全自动换行

2.多写作本末显示信息省略号

① Webkit访问器或挪动端网页页面

p{
width: 200px;height:150px;border: 1px solid pink;
 line-height: 30px;cursor: pointer;padding: 0 5px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <title></title>
    </head>
    <body>
        <p title="Web 访问器针对 ECMAScript 来讲是1个寄主自然环境,但它其实不是唯1的寄主自然环境。客观事实上,也有数不胜数的别的各种各样自然环境(比如 Nombas 的 ScriptEase,和 Macromedia 另外用在 Flash 和 Director MX 中的 ActionScript)能够容下 ECMAScript 完成">Web 访问器针对 ECMAScript 来讲是1个寄主自然环境,但它其实不是唯1的寄主自然环境。客观事实上,也有数不胜数的别的各种各样自然环境(比如 Nombas 的 ScriptEase,和 Macromedia 另外用在 Flash 和 Director MX 中的 ActionScript)能够容下 ECMAScript 完成</p>
    </body>
</html>

 关键编码:

 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}

display:-webkit-box;将目标做为延展性盒子实体模型显示信息。

-webkit-box-orient;设定或查找伸缩盒目标的子元素的排序方法。

-webkit-line-clamp;限定在1个块元素显示信息的文字的行数。

小tip:该特性为webkit的独享特性,只可用于webkit核心访问器或挪动端。

② 跨访问器适配计划方案

②⑴:设定相对性精准定位的器皿高宽比,用包括省略号(...)的元素仿真模拟完成

p{
width: 200px;height:150px;border: 1px solid pink;line-height: 30px;cursor: pointer;padding: 0 5px;
overflow: hidden;
position: relative;
}
span{
position: absolute;
bottom: 0;
right: 0;
}
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF⑻">
        <title></title>
    </head>
    <body>
        <p title="Web 访问器针对 ECMAScript 来讲是1个寄主自然环境,但它其实不是唯1的寄主自然环境。客观事实上,也有数不胜数的别的各种各样自然环境(比如 Nombas 的 ScriptEase,和 Macromedia 另外用在 Flash 和 Director MX 中的 ActionScript)能够容下 ECMAScript 完成">Web 访问器针对 ECMAScript 来讲是1个寄主自然环境,但它其实不是唯1的寄主自然环境。客观事实上,也有数不胜数的别的各种各样自然环境(比如 Nombas 的 ScriptEase,和 Macromedia 另外用在 Flash 和 Director MX 中的 ActionScript)能够容下 ECMAScript 完成<span>...</span></p>
    </body>
</html>

②⑵:根据伪元素仿真模拟加上省略号(...)

p{
width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;
overflow: hidden;
position: relative;
}
p:after{
content: '...';
position: absolute;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
bottom: 0;
right: 0;
}

小tip:

a.height高宽比应是line-height的n(行数)倍;

b.完毕的省略号能用半全透明png做减淡实际效果,或设定情况色调;

c.IE6⑺无法显示content內容,处理计划方案以下:

引进jquery和jquery.pseudo.js

p{
width: 200px;height:150px;border: 1px solid pink; line-height: 30px;cursor: pointer;padding: 0 5px;
overflow: hidden;
position: relative;
}
span{
after:'...';
position: absolute;
right: 0;
bottom: 0;
}

3.JavaScript计划方案

a.Clamp.js

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

应用:

var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});

b.jQuery.dotdotdot

免费下载及详尽文本文档详细地址:https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/

应用:

$(document).ready(function() {
    $("#wrapper").dotdotdot({
        //    configuration goes here
    });
}); 

以上便是本文的所有內容,期待本文的內容对大伙儿的学习培训或工作中能带来1定的协助,另外也期待多多适用脚本制作之家!