text-overflow: ellipsis;的用法

单行文本不折行,显示不了的就用省略号表示
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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • body{ background:#f5faff; } .demo_con{ width:960px; margi...
    小忆123阅读 1,145评论 0 0
  • 1、垂直对齐 如果你用CSS,则你会有困惑:我该怎么垂直对齐容器中的元素?现在,利用CSS3的Transform,...
    kiddings阅读 3,206评论 0 11
  • 本书介绍 你是不是对Django的学习感到迷茫?是不是对网上零星的教程感到绝望?是不是苦于没有可以迅速上手的实例而...
    阡陌3536阅读 1,334评论 0 0
  • 一直好想改变一下自己,本以为很简单,好多年了还是老样子,放不开,改不掉,好累。也许我该抛开一切世俗的枷锁,只为自己...
    天才小提莫丶阅读 111评论 0 0
  • 肆月。暮春时节。 空气中,满满甜腻的气息。 春天,真的是恋爱的季节。 上山的路,不知走了多少回。那个冬日,阳光清浅...
    枫林渡1980阅读 672评论 3 5