重点:text-overflow: ellipsis;只对display:inline;起作用
  1.  
  1. 例子:
  2. <span class="a">我说说<b class="b">打瞌睡党风建设打火机</b>说说色儿</span>
    1.  
    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属来兼容部分浏览。

实现方法:

  1. overflow: hidden;
  2. text-overflow:ellipsis;
  3. white-space: nowrap;
效果如图:

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

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

实现方法:

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

 

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

注:

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

实现方法:

  1. p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
  2. p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
  3. background: -webkit-linear-gradient(left, transparent, #fff 55%);
  4. background: -o-linear-gradient(right, transparent, #fff 55%);
  5. background: -moz-linear-gradient(right, transparent, #fff 55%);
  6. 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. 解放双手 | Jenkins + gitlab + maven 自动打包部署项目

    前言 记录 Jenkins + gitlab + maven 自动打包部署后端项目详细过程! 需求背景 不会偷懒的程序员不是好码农,传统的项目部署,有时候采用本地手动打包,再通过ssh传到服务器部署运 ...

  2. 采用太平洋AI集装箱箱号识别接口实现集装箱箱号识别

    识别 示例图片 1 太平洋AI集装箱箱号识别接口(文档下方有详细操作指南) 1.1 接口一:提交base64格式的图片 地址:http://218.1.125.60:88/container_num_ ...

  3. 【bzoj3218】a+b Problem 最小割+主席树

    数据范围:$n≤5000$,$a,l,r≤10^9$,$b,w,p≤2\times 10^5$. 我们考虑一种暴力的最小割做法: 首先令$sum=\sum\limits_{i=1}^{n} b_i+w ...

  4. netcore高性能Web服务器Kestrel分析

    Kestrel是aspnetcore中的web服务器之一,其本身有跨平台,轻量级,高性能的特点 在 ryzen 1600 12核cpu 测试环境中,瞬间每秒处理请求数能达到2w5以上,与netty不相 ...

  5. C#:自定义函数

    将数组转成字符串 /// <summary> /// 将数组转成字符串 /// </summary> /// <param name="glue"&g ...

  6. OSGI动态加载删除Service bundle

    OSGi模块化框架是很早就出来的一个插件化框架,最早Eclipse用它而出名,但这些年也没有大热虽然OSGi已经发布了版本1到版本5.现在用的最多的,也是本文讲述基于的是Equinox的OSGi实现, ...

  7. 12 二叉树-链式存储-二叉排序树(BST)

    呜呜 写这个东西花了我2天 居然花了两天!!我还要写AVL呢啊啊啊啊啊啊啊!!!!!! 等下还要跑去上自习 大早上起来脸都没洗现在先赶紧发博客 昨晚写出来了独自在其他人都睡着了的宿舍狂喜乱舞.. 迷之 ...

  8. Django+Echarts画图实例

    所有演示均基于Django2.0 阅读此篇文章你可以: 了解Django中aggregate和annotate函数的使用方法 获取一个Django+Echarts绘制柱状图的完整示例 需求说明 一张会 ...

  9. 插入排序:直接插入排序&希尔排序

    一.直接插入排序 1. 思想 直接排序法, 可以分为两个部分, 一部分是有序的, 一部分是无序的. 从这个图上, 应该是能看清楚直接插入排序的思想了. 将无序部分的第一个与有序部分进行比较. 从有序部 ...

  10. Java NIO系列教程(九) ServerSocketChannel

    Java NIO中的 ServerSocketChannel 是一个可以监听新进来的TCP连接的通道, 就像标准IO中的ServerSocket一样.ServerSocketChannel类在 jav ...