未做隐藏处理

执行结果:

1、1行超出部分省略号

效果:

2、多行超出部分隐藏(目前只能在chrome浏览器中使用,其他浏览器不兼容)

  

效果:

-webkit-line-clamp 属性定义显示行数可以随需求改变

目前开发的使用方式是:

限制文字盒子高度为文字  line-height  大小的倍数,至于其他显示字数由后端限制

效果:

  

css 文字超出部分隐藏的更多相关文章

  1. css文字超出自动显示省略号

    只针对单行文本有效: 01.针对块状元素 ul li{ width: 180px; text-overflow: ellipsis; white-space: nowrap;/*禁止自动换行*/ ov ...

  2. JQuery 简单的文字超出部分隐藏下拉显示

    HTML代码: <body> <div class="txt_bos"><!--在每一个放置文字的class外面包一个div,以便设置动画样式用,同样 ...

  3. css 文字超出部分显示省略号(原)

    单行超出省略号 #word1{width: 100px; text-overflow: ellipsis; overflow: hidden;} 几行超出省略号(只兼容webkit内核) #wordN ...

  4. CSS文字超出div或者span时显示省略号

    我们常常需要在文本过长时显示,将超出显示成省略号: 思想为: 首先设置宽度,然后让超出的部分隐藏如果有超出则在最后显示省略号让文本不换行 具体css代码为: .title{ width:200px;o ...

  5. css文字超出一行用点表示

    1,css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2,css超出二行用点表示 overflow:hi ...

  6. css 文字超出省略号

    white-space:nowrap; overflow:hidden; -o-text-overflow:ellipsis; text-overflow:ellipsis; 语法: text-ove ...

  7. css文字超出后显示...

    多行 overflow: hidden; //超出的文本隐藏 text-overflow: ellipsis; //溢出用省略号显示 display: -webkit-box; -webkit-lin ...

  8. css文字超出指定行数显示省略号

    display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...

  9. css 文字超出变 ... 点点点

    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;

随机推荐

  1. mysql官网下载驱动包

    [转载]原文链接:http://blog.csdn.net/u010523770/article/details/52240946 驱动官网下载地址:http://dev.mysql.com/down ...

  2. mybatis中实现一对一,一对多查询

    在实际的开发中我们经常用到的是一对一查询和一对多查询.而多对多的实现是通过中间来实现,这里就没有给出来了 比如: 订单和用户是一对一的关系(一个订单只能对应一个用户) 订单和订单明细是一对多的关系(一 ...

  3. mybatis中使用包装对象

    在实际的应用中,很多时候我们需要的查询条件都是一个综合的查询条件,因此我们需要对已经存在的实体进行再一次的包装,以方便我们进行查询操作,于是包装对象的作用就很明显了,在这里我举一个简单的例子 1.首先 ...

  4. channel补充

    网易: package main import ( "fmt" ) func main() { var c chan int fmt.Printf("c=%v\n&quo ...

  5. 超线程(Hyper-Threading)

    运行方式 每个单位时间内,一个CPU只能处理一个线程(操作系统:thread),以这样的单位进行,如果想要在一单位时间内处理超过一个线程是不可能的,除非是有两个CPU的实体单元.双核心技术是将两个一样 ...

  6. 深入浅出Cocoa 之动态创建类【转】

    在前文<深入浅出Cocoa之类与对象>一文中,我已经详细介绍了ObjC中的 Class 与 Object 的概念,今天我们来如何在运行 时动态创建类.下面这个函数就是应用前面讲到的Clas ...

  7. Web.xml详解(转)(Filter,context,listener)

    web.xml 详细解释!!(链接) web.xml加载过程(步骤) 首先简单说一下,web.xml的加载过程. 当我们去启动一个WEB项目时,容器包括(JBoss.Tomcat等)首先会读取项目we ...

  8. springboot(十九)使用actuator监控应用【转】【补】

    springboot(十九)使用actuator监控应用 微服务的特点决定了功能模块的部署是分布式的,大部分功能模块都是运行在不同的机器上,彼此通过服务调用进行交互,前后台的业务流会经过很多个微服务的 ...

  9. day39-Spring 16-Spring的JDBC模板:设置参数到属性文件

    <?xml version="1.0" encoding="UTF-8"?> <!-- 引入beans的头 --> <beans ...

  10. 【转载】CPU相关总结

    What is the difference between Processor, Core, Logical Processor ? Processor : It’s the physical co ...