1. 单行文本溢出省略号效果
.ellipsis {
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
<div class="ellipsis">
  这时我看见他的背影,我的泪很快地流下来了。我赶紧拭干了泪。怕他看见,也怕别人看见。我再向外看时,他已抱了朱红的橘子往回走了。过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走。到这边时,我赶紧去搀他。他和我走到车上,将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土,心里很轻松似的。过一会儿说:“我走了,到那边来信!”我望着他走出去。他走了几步,回过头看见我,说:“进去吧,里边没人。”等他的背影混入来来往往的人里,再找不着了,我便进来坐下,我的眼泪又来了。
</div>
效果:
 
2. 指定N行文字溢出省略号效果(以4行为例)----因使用了WebKit的CSS扩展属性,适用于WebKit浏览器及移动端

.ellipsis_four {
  display:-webkit-box; // 必须结合的属性,将对象作为弹性伸缩盒子模型展示
  -webkit-line-clamp: 4; // 需要结合其他属性来使用才有效果
  -webkit-box-orient: vertical; // 必须结合的属性,设置子元素(在这里指文字)的排列方式
  overflow: hidden;
}
<div class="ellipsis_four">
  这时我看见他的背影,我的泪很快地流下来了。我赶紧拭干了泪。怕他看见,也怕别人看见。我再向外看时,他已抱了朱红的橘子往回走了。过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走。到这边时,我赶紧去搀他。他和我走到车上,将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土,心里很轻松似的。过一会儿说:“我走了,到那边来信!”我望着他走出去。他走了几步,回过头看见我,说:“进去吧,里边没人。”等他的背影混入来来往往的人里,再找不着了,我便进来坐下,我的眼泪又来了。
</div>

效果:

3. 文字溢出其他处理效果(需要配合js使用,否则不管文字多少,都会显示“查看全文”)
.ellipsis_all {
  position: relative; // 相对定位,为了让“查看全文”绝对定位到右下角
  overflow: hidden;
  max-height: 82px; // 指定盒子高度
  line-height: 21px; // 指定盒子内文字的行高,防止一行文字只出现一半的情况
  border: 1px solid red;
}
.ellipsis_all:after {
  content: "查看全文";
  color: blue;
  position: absolute;
  bottom: 0;
  right: 0;
  padding-left: 40px;
  height:21px;
  line-height: 26px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 1) 35%, #fff 100%); // 加此渐变背景避免文字值显示一半
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 1) 35%, #fff 100%);
  background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 1) 35%, #fff 100%);
  background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 1) 35%, #fff 100%);
}
<div class="ellipsis_all">
  这时我看见他的背影,我的泪很快地流下来了。我赶紧拭干了泪。怕他看见,也怕别人看见。我再向外看时,他已抱了朱红的橘子往回走了。过铁道时,他先将橘子散放在地上,自己慢慢爬下,再抱起橘子走。到这边时,我赶紧去搀他。他和我走到车上,将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土,心里很轻松似的。过一会儿说:“我走了,到那边来信!”我望着他走出去。他走了几步,回过头看见我,说:“进去吧,里边没人。”等他的背影混入来来往往的人里,再找不着了,我便进来坐下,我的眼泪又来了。
</div>
效果:

CSS文本溢出处理方式的更多相关文章

  1. CSS 文本溢出时显示省略标记

    如标题所示... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  2. CSS文本溢出显示省略号

    项目中常常有这种需要我们对溢出文本进行"..."显示的操作,单行多行的情况都有(具体几行得看设计师心情了),这篇随笔是我个人对这种情况解决办法的归纳,欢迎各路英雄指教. 单行 语法 ...

  3. css文本溢出隐藏显示省略号(单行+多行)

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  4. CSS ... 文本溢出用省略号代替

    { overflow:hidden; text-overflow:ellipsis; white-space:nowrap } text-overflow 属性规定当文本溢出包含元素时发生的事情. c ...

  5. css 文本溢出

    多行文本溢出处理: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; // 3 行 overflow ...

  6. CSS文本溢出效果&滚动条样式设置

    一.文本溢出 1.overflow: hidden;  超出文本会被剪裁隐藏不可见 scroll;超出文本会被剪裁, 显示滚动条 auto; 如果文本超出会显示滚动条,没超出不会显示, overflo ...

  7. css文本溢出解决方案

    1.普通单行截断省略 overflow:hidden; 文字长度超出限定宽度,则隐藏超出的内容) text-overflow:ellipsis;(设置文字在一行显示,不能换行) white-space ...

  8. #CSS 文本溢出部分显示省略号

    单行结尾溢出: 用text-overflow:ellipsis属性实现,当然还需要加宽度width属来兼容部分浏览. width:300px;overflow: hidden; text-overfl ...

  9. css 文本溢出显示省略号

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

  1. Ogre学习教程:Ogre1.8.1+VS2010环境配置(转)

    http://blog.csdn.net/yangtrees/article/details/8724120 http://blog.csdn.net/cll611/article/details/8 ...

  2. Hadoop HBase概念学习系列之RowKey设计(二十九)

    HBase里的RowKey设计,分为随机查询的RowKey设计和连续查询的RowKey设计.

  3. python 统计学的各种检验

    1.使用python中的Numpy进行t检验 http://www.atyun.com/7476.html 2.scipy中的卡方检验 http://wiki.mbalib.com/wiki/%E5% ...

  4. #001 GIT创建分支

    GitHub创建分支 如何在github 创建 一个分支出来,进行开发,最后在 merge 到主干上. Git 操作命令 git branch branchName //创建一个分支 git chec ...

  5. Hibernate事务、缓存和连接池

    一.事务 1.数据库事务的概念 数据库事务是指由一个或多个SQL语句组成的工作单元,这个工作单元中的SQL语句相互依赖,如果有一个SQL语句执行失败,就必须撤销整个工作单元.在并发环境中,多个事务同时 ...

  6. MySQL半同步主从.md

    MySQL Semisynchronous Replication 复制架构衍生史 1.普通的replication,异步同步. 搭建简单,使用非常广泛,从mysql诞生之初,就产生了这种架构,性能非 ...

  7. 类型构造器-Functor[F[_]]

    类型构造是抽象类型或高阶类型实例化的过程: 类型构造器是任意输入一个或几个已有类型,能够生成新类型的类型: https://www.cnblogs.com/feng9exe/p/9925027.htm ...

  8. Burpsuite-Intruder-xssValidator(XSS检测)基础学习

    这次总结的是使用Burp+PhantomJS进行xss测试. 首先,当然是xss测试的环境配置了. 1. PhantomJS安装及Path配置:自己找资料吧. phantomjs -v验证是否成功安装 ...

  9. 数字电路中应避免产生不必要的锁存器 Latch

    锁存器(Latch)是数字逻辑电路中很重要的一种基本电路,常见的锁存器包括三个端口:数据输入口.数据输出口.使能端.当使能端为高电平时,输入口的数据直接送到输出口,此时输入输出口可以看成是直接连通的: ...

  10. 404 Note Found 队-Beta1

    目录 组员情况 组员1(组长):胡绪佩 组员3:庄卉 组员4:家灿 组员5:凯琳 组员6:翟丹丹 组员7:何家伟 组员8:政演 组员9:黄鸿杰 组员10:刘一好 组员11:何宇恒 展示组内最新成果 团 ...