多行文字简练化解方案,多行文字溢出

一、应用

-webkit-line-clamp 多行文字溢出…,webkitlineclamp

WebKit浏览器或活动端的页面
在WebKit浏览器或移动端(绝超越54%是WebKit内核的浏览器)的页面完结相比轻巧,能够直接动用WebKit的CSS扩充属性(WebKit是个体属性)-
webkit-line-clamp;注意:那是一个 不标准的特性(unsupported WebKit
property多行文字简练化解方案,多行文字溢出。),它并未有现身在
CSS 规范草案中。

CSS代码:
.box {
    width: 100px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

一、应用

-webkit-line-clamp

用来界定在叁个块成分显示的公文的行数。
为了促成该成效,它要求整合其余的WebKit属性。常见结合属性:
1.display: -webkit-box; 必须结合的属性
,将对象作为弹性伸缩盒子模型展现 。
2.-webkit-box-orient; 必须结合的属性
,设置或搜求伸缩盒对象的子成分的排列情势 。
3.text-overflow: ellipsis;
能够用来多行文本的情状下,用省略号“…”隐藏越过范围的文本 。

HTML代码:
<div class="box">
    美国进口Culturelle康萃乐益生菌30片儿童水果味LGG益生菌咀嚼片
</div>
CSS代码:
.box {
    width: 100px; 
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
css 代码:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

唯独那本性情并不补助多创作本溢出显示省略号,这里依据使用场景介绍多少个措施来贯彻那样的效能。

效果:

美国进口Culturelle康萃乐
益生菌30片儿童水果味LGG...

 
HTML代码:
<div class="box">
    美国进口Culturelle康萃乐益生菌30片儿童水果味LGG益生菌咀嚼片
</div>

WebKit浏览器或位移端的页面

在WebKit浏览器或移动端(绝当先一半是WebKit内核的浏览器)的页面完成相比较轻便,能够直接动用WebKit的CSS扩展属性(WebKit是私家属性)-webkit-line-clamp
;注意:那是2个 不标准的属性(unsupported WebKit
property),它并未有出现在CSS 标准草案中。

二、理解

小心:-webkit-line-clamp是webkit的个体属性,是三个不正规的性质(unsupported Web基特 property),它没有出现在 CSS
标准草案中。

        -webkit-line-clamp用来界定在1个块成分显示的文书的行数。
为了兑现该成效,它须求组合其余的WebKit属性。常见结合属性:

         display: -webkit-box; 必须结合的属性
,将目的作为弹性伸缩盒子模型呈现 。

        -webkit-box-orient 必须结合的属性
,设置或研究伸缩盒对象的子成分的排列格局 。

 

效果:

美国进口Culturelle康萃乐
益生菌30片儿童水果味LGG...

 
-webkit-line-clamp

用来界定在多少个块成分呈现的公文的行数。
为了落成该作用,它需求组合其余的WebKit属性。常见结合属性:
1.display: -webkit-box; 必须结合的属性
,将对象作为弹性伸缩盒子模型展现 。
2.-webkit-box-orient; 必须结合的属性
,设置或搜求伸缩盒对象的子元素的排列方式 。
3.text-overflow: ellipsis;
能够用来多行文本的景况下,用省略号“…”隐藏超过范围的文本 。

三、兼容性

本条属性 近期仅扶助webkit浏览器,比较合适WebKit浏览器或移动端(移动端绝超越八分之四是Web基特内核的浏览器)

跨浏览器包容的方案

A:相比可信简单的做法正是设置相对固化的容器中度,用带有省略号(…)的因素模拟落成

美高梅开户网址 1美高梅开户网址 2

p {

  position: relative;

  line-height: 1.4em;

  height: 4.2em;

  overflow: hidden;

}

p::after {

  content: "...";

  font-weight: bold;

  position: absolute;

  bottom: 0;

  right: 0;

  padding: 0 20px 1px 45px;

  backgroundnull:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;

}

View Code 

那边注意几点:

height中度正好是line-height的3倍;

结束的省略好用了半晶莹剔透的png做了减淡的遵从,只怕安装背景颜色;

IE6-7不展现content内容,所以要包容IE⑥-七得以是在剧情中到场1个标签,比方用<span
class=”line-clamp”>…</span>去模拟;

要支持IE8,需要将::after替换成:after;

 

B:Javascript (插件)方案    

用js也能够依照上边的思绪去模拟,达成也很简短

1.clamp.js   使用也非凡轻便:

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

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

 

2.jQuery插件-jQuery.dotdotdot   本条动用起来也很有益于:

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

二、理解

在意:-webkit-line-clamp是webkit的私家属性,是一个半间不界的习性(unsupported WebKit property),它未有出现在 CSS
标准草案中。

        -webkit-line-clamp用来限制在三个块成分呈现的文书的行数。
为了落到实处该功效,它需求组合别的的WebKit属性。常见结合属性:

         display: -webkit-box; 必须结合的属性
,将目的作为弹性伸缩盒子模型显示 。

        -webkit-box-orient 必须结合的属性
,设置或搜求伸缩盒对象的子成分的排列情势 。

 

css 代码:
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;

以此特性比较合适WebKit浏览器或移动端(绝大多数是WebKit内核的)浏览器。

延伸:单行文本溢出呈现省略号…代码

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

 

 

三、兼容性

这么些属性 近期仅帮助webkit浏览器,比较合适WebKit浏览器或移动端(移动端绝超越四分一是WebKit内核的浏览器)

跨浏览器包容的方案

A:相比可相信简单的做法便是安装相对固定的器皿中度,用含有省略号(…)的要素模拟落成

美高梅开户网址 3p {
  position: relative;   line-height: 1.4em;   height: 4.2em;
  overflow: hidden; } p::after {   content: “…”;   font-weight:
bold;   position: absolute;   bottom: 0;   right: 0;   padding:
0 20px 1px 45px;
  backgroundnull:url()
repeat-y; } View Code 

此地注意几点:

height中度正好是line-height的三倍;

截至的省略好用了半晶莹剔透的png做了减淡的效率,或然安装背景颜色;

IE6-柒不显得content内容,所以要包容IE6-柒足以是在内容中进入3个标签,举个例子用<span
class=”line-clamp”>…</span>去模拟;

要支持IE8,需要将::after替换成:after;

 

B:Javascript (插件)方案    

用js也得以依赖地方的思绪去模拟,实现也比很粗略

1.clamp.js   使用也万分简单:

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

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

 

2.jQuery插件-jQuery.dotdotdot   本条应用起来也很有利:

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

跨浏览器兼容的方案

比较可靠轻易的做法就是设置相对固化的器皿中度,用饱含省略号(…)的要素模拟完结;

延长:单行文本溢出呈现省略号…代码

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

 

 

多行文字溢出…,webkitlineclamp 一、应用 CSS代码: .box { width: 拾0px;
display: -webkit-box; -webkit-line-clamp: 二; -webkit-box-orient:
vertical;…

css 代码:
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://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}

此处注意几点:
一.height中度真好是line-height的3倍;
二.完工的省略好用了半透明的png做了减淡的成效,大概安装背景颜色;
三.IE陆-7不展现content内容,所以要包容IE陆-7能够是在内容中参预三个标签,比方用<span
class=”line-clamp”>…</span>去模拟;
4.要支持IE8,需要将::after替换成:after;

JavaScript 方案

用js也得以依据上边的思绪去模拟

  1. 多行文本超出省略号包容IE8 :好处是足以活动判断文本或长或短。
JS代码:
$(".video-list-p").each(function(i){
    var divH = $(this).height();
    var $p = $("span", $(this)).eq(0);
    while ($p.outerHeight() > divH) {
        $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
    };
});

2.插件:
美高梅开户网址,Clamp.js
下载及文书档案地址:https://github.com/josephschmitt/Clamp.js

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

dome地址:https://codepen.io/feiwen8772/pen/AckqK

jQuery.dotdotdot
下载及详细文书档案地址:https://github.com/BeSite/jQuery.dotdotdot或http://dotdotdot.frebsite.nl/

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图