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

By admin in 4858美高梅 on 2019年4月5日

一、应用

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

一、应用

WebKit浏览器或移动端的页面
在WebKit浏览器或移动端(绝超过四分之二是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;
}

一、应用

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;
}
HTML代码:
<div class="box">
    美国进口Culturelle康萃乐益生菌30片儿童水果味LGG益生菌咀嚼片
</div>
css 代码:
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

而是那个个性并不扶助多创作本溢出显示省略号,那里依据使用场景介绍多少个主意来落到实处那样的成效。

效果:

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

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

效果:

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

 

WebKit浏览器或活动端的页面

在WebKit浏览器或移动端(绝当先5/10是WebKit内核的浏览器)的页面达成相比较不难,能够直接行使WebKit的CSS增添属性(WebKit是个体属性)-webkit-line-clamp
;注意:那是2个 不标准的质量(unsupported WebKit
property),它并未出现在
CSS 规范草案中。

二、理解

只顾:-webkit-line-clamp是webkit的村办属性,是1个不伦不类的本性(unsupported WebKit property),它从不出现在 CSS
规范草案中。

        -webkit-line-clamp用来限制在一个块成分显示的文件的行数。
为了完成该意义,它要求结合其余的WebKit属性。常见结合属性:

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

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

 

效果:

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

 

二、理解

注意:-webkit-line-clamp是webkit的私家属性,是三个不三不四的习性(unsupported WebKit property),它从未出现在 CSS
规范草案中。

        -webkit-line-clamp用来界定在三个块成分显示的文件的行数。
为了落到实处该功用,它需求结合其余的WebKit属性。常见结合属性:

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

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

 

-webkit-line-clamp

用来界定在三个块成分展现的文件的行数。
为了完成该意义,它须求组合其余的WebKit属性。常见结合属性:
1.display: -webkit-box; 必须结合的属性
,将指标作为弹性伸缩盒子模型展现 。
2.-webkit-box-orient; 必须结合的属性
,设置或探寻伸缩盒对象的子元素的排列格局 。
3.text-overflow: ellipsis;
能够用来多行文本的事态下,用省略号“…”隐藏超出范围的文本 。

三、兼容性

那几个属性 如今仅援助webkit浏览器,比较合适WebKit浏览器或移动端(移动端绝超越5二%是WebKit内核的浏览器)

跨浏览器包容的方案

A:相比较可信简单的做法就是安装相对稳定的容器中度,用含有省略号(…)的成分模拟完成

4858美高梅 14858美高梅 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的三倍;

截至的省略好用了半透明的png做了减淡的功力,或然设置背景颜色;

IE陆-七不显得content内容,所以要包容IE陆-七能够是在内容中加入贰个标签,比如用<span
class=”line-clamp”>…</span>去模拟;

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

 

B:Javascript (插件)方案    

用js也得以依据上边的笔触去模拟,实现也很简单

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

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的民用属性,是1个不标准的属性(unsupported Web基特 property),它未有出未来 CSS
规范草案中。

        -webkit-line-clamp用来界定在多个块成分展现的文本的行数。
为了完结该意义,它要求组合别的的WebKit属性。常见结合属性:

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

        -webkit-box-orient 必须结合的属性
,设置或探寻伸缩盒对象的子成分的排列方式 。

 

三、兼容性

以此属性 近日仅补助webkit浏览器,比较合适WebKit浏览器或移动端(移动端绝超过八分之四是WebKit内核的浏览器)

跨浏览器包容的方案

A:比较可相信不难的做法正是安装相对固定的容器高度,用富含省略号(…)的成分模拟达成

4858美高梅 34858美高梅 4

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;

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

}

View Code 

此处注意几点:

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

利落的省略好用了半透明的png做了减淡的作用,或然设置背景颜色;

IE陆-7不显示content内容,所以要兼容IE陆-7足以是在内容中投入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
  });
});
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:相比可靠不难的做法便是设置相对固定的容器中度,用带有省略号(…)的要素模拟实现

4858美高梅 5p {
  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的3倍;

停止的省略好用了半透明的png做了减淡的作用,只怕设置背景颜色;

IE陆-7不出示content内容,所以要包容IE陆-七得以是在内容中进入一个标签,比如用<span
class=”line-clamp”>…</span>去模拟;

4858美高梅 ,要支持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

 

 

跨浏览器兼容的方案

相比较可信赖简单的做法就是设置相对固定的器皿高度,用带有省略号(…)的成分模拟达成;

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

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

 

 

多行文字溢出…,webkitlineclamp ①、应用 CSS代码: .box { width: 100px;
display: -webkit-box; -webkit-line-clamp: 2; -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;
}

此地注意几点:
1.height高度真好是line-height的3倍;
贰.截至的省略好用了半晶莹剔透的png做了减淡的法力,可能安装背景颜色;
三.IE陆-7不出示content内容,所以要包容IE陆-7方然而在剧情中投入七个标签,比如用<span
class=”line-clamp”>…</span>去模拟;
4.要支持IE8,需要将::after替换成:after;

JavaScript 方案

用js也足以依照地方的思路去模拟

  1. 多行文本超出省略号包容IE捌 :好处是足以活动判断文本或长或短。
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地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有