text-overflow: ellipsis;的用法

单行文本不折行，显示不了的就用省略号表示
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（如：…
）；兼容ie8需要将::after
替换成:after
。