单行文本不折行，显示不了的就用省略号表示
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="ct">
多行文本固定高度的居中多行文本固定高度的居中
</div>
</body>
</html>
CSS代码
.ct{
width: 200px;
white-space: nowrap;
border: 1px solid red;
overflow: hidden;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
overflow: hidden;
内容超出宽度时隐藏超出部分的内容
text-overflow: ellipsis;
当对象内文本溢出时显示省略标记(…)；需与overflow:hidden;
一起使用。
与上述方法符合所需要的条件： 1、可设置width（即内联或块）的元素； 2、只对单行文本起作用。 浏览器兼容：IE/Firefox/Chrome/Opera等。
多行文本折行，显示不了的就用省略号表示
CSS代码
.ct{
width: 200px;
border: 1px solid red;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
display: -webkit-box;
-webkit-line-clamp: 4; /显示的文本行数/
-webkit-box-flex: 4;
}
Mobile Web开发奇淫巧计 因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；
与上述方法符合所需要的条件： 1.-webkit-line-clamp
用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。常见结合属性： 2.display: -webkit-box;
必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。 3.-webkit-box-orient
必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
.ct{
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
添加渐变背景可避免文字只显示一半。 3.由于ie6-7不显示content内容，所以要添加标签兼容ie6-7（如：<span>…<span/>
）；兼容ie8需要将::after
替换成:after
。
网友评论