重点:text-overflow: ellipsis;只对display:inline;起作用

  1. 例子:
  2. <span class="a">我说说<b class="b">打瞌睡党风建设打火机</b>说说色儿</span>
    
    
    1. a{
    2.    display:block/inline-block;
      1. width:100px;
    3.    overflow: hidden;
      1. white-space: nowrap;

         text-overflow: ellipsis;
    4. }
    5. b{
    6. display:inline; //正确
    7. display:inline-block //错误,b标签里的字超出不能显示省略号(...)
    8. }
     
 //一行
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
//两行
 text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
 
 

如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览。

实现方法:

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
效果如图:

但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。

接下来重点说一说多行文本溢出显示省略号,如下。

实现方法:

display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;
overflow: hidden;
效果如图:

 

适用范围:
因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;

注:

  1. -webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果,它需要组合其他的WebKit属性。常见结合属性:
  2. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。
  3. -webkit-box-orient 必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式 。

实现方法:

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);}
效果如图:

 

适用范围:
该方法适用范围广,但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注:

    1. 将height设置为line-height的整数倍,防止超出的文字露出。
    2. 给p::after添加渐变背景可避免文字只显示一半。
    3. 由于ie6-7不显示content内容,所以要添加标签兼容ie6-7(如:<span>…<span/>);兼容ie8需要将::after替换成:after。
      来源: http://www.daqianduan.com/6179.html

css 文本两行显示,超出省略号表示的更多相关文章

  1. angularJs 控制文本长度,超出省略号过滤器

    1.控制文本长度,超出省略号 在模版中: <label>{{item.abbr| cut:true:20:' ...' }}<label> js: angular.module ...

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

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

  3. css 文本单行显示溢出时出现省略号 多行显示溢出时出现省略号 首行缩进

    一.文本单行显示溢出时出现省略号 二.文本多行显示溢出时出现省略号(这种样式只能在webkit和移动端使用,包括小程序,不能设置固定高度) 三.首行缩进两字符 text-indent: 2em; 四. ...

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

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

  5. css文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

  6. CSS文本单行显示溢出时出现省略号,多行时首行缩进并出现省略号

    为了展示表格显示字数控制,比如商品类名字太长只展示部分 1.正常文本 效果: 2.单行时出现省略号 效果: 3.多行首行缩进并出现省略号 效果:

  7. css 一行内显示 超出自动隐藏

    一般的文字截断(适用于内联与块): Example Source Code [www.mb5u.com].text-overflow {display:block;/*内联对象需加*/width:31 ...

  8. CSS文本居中显示

    因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...

  9. CSS文本垂直居中显示

    <style> .sty1 { width: 300px; height: 200px; background-color: black; text-align: center; colo ...

随机推荐

  1. JDK提供的四种线程池代码详解

    一.线程池什么时候使用,会给我们带来什么好处? 如果很多用户去访问服务器,用户访问服务器的时间是非常短暂的,那么有可能在创建线程和销毁线程上花费的时间会远远大于访问所消耗的时间,如果采用线程池会使线程 ...

  2. 面试题---实现strcpy函数

    #include <stdio.h> char *strcpy(char *strDest,char *strSrc) { if(strDest == NULL || strSrc == ...

  3. 面试:C++输入数据

    最近在做笔试题,相比与leetcode,笔试题都是要自己写输入输出的,每次在这里都浪费了不少时间,这篇文章总结了一下在C++中怎么向数组中输入数据. 1. 先输入数组大小,然后输入数据数据,中间以空格 ...

  4. Oracle sys 用户无密码文件无法登录

    1.安装时候,global database name  环境变量听ORACLE_SID不一致,生成的sys密码文件默认为global database name 一致,但在连接时候service n ...

  5. java web 答辩总结

    今天我们组答辩.在昨天前三个组答辩之后,整理了一些试题. 在这个项目的答辩准备:首先把这个java web这本书大概的看了一遍:对整理的那些试题也把答案整理出来了:针对老师提问频率较高的试题:针对自己 ...

  6. 用SVN进行团队开发协作生命周期详解

    目录 前言 面向人群 背景 解决方案 团队开发生命周期 创建新项目 创建分支 切换分支 合并代码 正式版本发布 bug修复 结束语 前言 查找了SVN的相关知识无论是园子里还是百度都只有一些理论,而有 ...

  7. C#Redis 常用key操作

    一.前戏 在该系列的前几篇博客中,主要讲述的是与Redis数据类型相关的命令,如String.List.Set.Hashes和Sorted-Set.这些命令都具有一个共同点,即所有的操作都是针对与Ke ...

  8. Quartz2D简单图形

    这些天一直准备学绘图和核心动画这块,可一直找不到合适系统的教材,没有大纲,比较纠结,在网上搜了又搜,看着其他的博文写的 第一遍来学习绘制简单的图形 // 若想利用Quartz 2D在View上绘制信息 ...

  9. Silverlight 查询DataGrid 中匹配项 ,后台改变选中行颜色

    需求:根据关键字(参会人号码或名称)查找参会人,在datagird 中高亮显示 界面:我在界面上增加了一个文本框和按钮,进行查找操作 操作说明: 根据关键字进行搜索:输入关键字 点击查找,如果找到 以 ...

  10. 并发编程——ConcurrentHashMap#helpTransfer() 分析

    前言 ConcurrentHashMap 鬼斧神工,并发添加元素时,如果 map 正在扩容,其他线程甚至于还会帮助扩容,也就是多线程扩容.就这一点,就可以写一篇文章好好讲讲.今天一起来看看. 源码分析 ...