【4858美高梅】编写翻译失效化解方案,css达成多行文字限制彰显

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

<!DOCTYPE html>

【4858美高梅】编写翻译失效化解方案,css达成多行文字限制彰显。css达成多行文字限制彰显,css完结多行文字

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<meta name=”viewport” content=”width=device-width,
initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,
minimal-ui”>

<meta name=”apple-mobile-web-app-capable” content=”yes”>

<meta name=”apple-mobile-web-app-status-bar-style”
content=”black”>

<meta name=”format-detection” content=”telephone=no”>

<title>css完毕多行文字限制显示</title>

<style>

#test {

display:

box;

display: -webkit-box;

box-orient: vertical;

-webkit-box-orient: vertical;

line-clamp: 2;

-webkit-line-clamp: 2;

overflow:

hidden;

text-overflow:

ellipsis;

}

</style>

</head>

<body>

<p id=”test”>多行文字限制展现多行文字限制呈现多行文字限制呈现多行文字限制突显多行文字限制展现多行文字限制呈现多行文字限制展现多行文字限制突显</p>

</body>

</html>

!DOCTYPE
html html head meta charset = “UTF-8″ meta name =”viewport” content
=”width=device-width, initial-scale=1, maximu…

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title></title>
</head>
<style type=”text/css”>
.inaline{
overflow: hidden;
white-space:nowrap;   //单行展现溢出以省略号呈现情势
text-overflow: ellipsis;
}

单行文本不折行,展现不断的就用简短号表示
HTML代码
<!DOCTYPE html>

<html>

.intowline{
display: -webkit-box !important;
overflow: hidden;         //多行呈现溢出以省略号展现情势
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
}

<html>

<head>

div{
float:left;
width:200px;
height:100px;
border:1px solid #ff0000;
}
</style>
<body>
<div
class=”inaline”>小编激发健康是福就起来放假啊分开拓健康房间爱咖啡就爱看剪发卡双方均埃里克</div>
<div><p
class=”intowline”>爱咖啡就小编激发健康是福就开首放假啊分开采健康房间爱咖啡就本人激发健康是福就从头放假啊分开采健康房间爱咖啡就爱看剪发卡双方均Eric</p></div>
</body>
</html>

<head>

<meta charset=”UTF-8″>

4858美高梅 1

<meta charset=”utf-8″>

<meta name=”viewport” content=”width=device-width,
initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no,
minimal-ui”>

 

<title>JS Bin</title>

<meta name=”apple-mobile-web-app-capable” content=”yes”>

</head>

<meta name=”apple-mobile-web-app-status-bar-style”
content=”black”>

<body>

<meta name=”format-detection” content=”telephone=no”>

<div class=”ct”>

<title>css完毕多行文字限制展现</title>

多行文本固定中度的居中多行文本固定高度的居中

<style>

</div>

   /*

</body>

 
   编写翻译的时候,默许会过滤-webkit-box-orient:
vertical;导致多行文外省略显得不奏效

</html>

 
   消除方案:关闭autoprefixer然后再展开并注释掉

CSS代码
.ct{

  */

width: 200px;

#test {

white-space: nowrap;

display:

border: 1px solid red;

box;

overflow: hidden;

display: -webkit-box;

box-orient: vertical;

-ms-text-overflow: ellipsis;

 
/* autoprefixer: off */  

text-overflow: ellipsis;

  -webkit-box-orient: vertical;

}

  /* autoprefixer: on */ 

overflow: hidden;
内容超越宽度时隐藏超出部分的内容
text-overflow: ellipsis;
当指标内文本溢出时显示省略标识(…);需与overflow:hidden;
一道行使。
与上述方法符合所急需的尺度: 1、可安装width(即内联或块)的成分;
二、只对单行文本起效果。 浏览器包容:IE/Firefox/Chrome/Opera等。
多创作本折行,彰显不断的就用简短号表示
CSS代码
.ct{

line-clamp: 2;

-webkit-line-clamp: 2;

overflow:

width: 200px;

hidden;

border: 1px solid red;

text-overflow:

overflow: hidden;

ellipsis;

text-overflow: ellipsis;

}

-webkit-box-orient: vertical;

</style>

display: -webkit-box;

</head>

-webkit-line-clamp: 4; /展现的公文行数/

<body>

-webkit-box-flex: 4;

<p id=”test”>多行文字限制彰显多行文字限制展现多行文字限制呈现多行文字限制彰显多行文字限制呈现多行文字限制展现多行文字限制展现多行文字限制展现</p>

}

</body>

Mobile
Web开拓奇淫巧计
因使用了WebKit的CSS扩张属性,该方法适用于WebKit浏览器及活动端;
与上述情势符合所需求的标准: 1.-webkit-line-clamp
用来界定在三个块成分显示的文件的行数。
为了兑现该意义,它供给组合别的的WebKit属性。常见结合属性: 二.display:
-webkit-box;
务必结合的属性 ,将对象作为弹性伸缩盒子模型展现 。
三.-webkit-box-orient
不能够不结合的属性 ,设置或索求伸缩盒对象的子成分的排列格局 。
.ct{

</html>

position: relative;

width: 200px;

line-height: 20px;

max-height: 40px;

overflow: hidden;

}

.ct::after{

content: “…”;

position: absolute;

bottom: 0;

right: 0;

padding-left: 40px;

background: -webkit-linear-gradient(left, transparent, #fff 55%);

background: -o-linear-gradient(rightright, transparent, #fff 55%);

background: -moz-linear-gradient(rightright, transparent, #fff 55%);

background: linear-gradient(to rightright, transparent, #fff 55%);

}

适用范围:
该格局适用范围广,但文字未高骑行的事态下也汇合世省略号,可整合js优化该办法。
注: 1.将height
设置为line-height
的平头倍,制止过量的文字表露。 2.给p::after
增多渐变背景可制止文字只突显2/四。
三.由于ie6-7不显得content内容,所以要加多标签包容ie陆-七(如:<span>…<span/>
4858美高梅,);兼容ie8需要将::after
替换成:after

发表评论

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

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有