display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;//超出三行隐藏
overflow: hidden;

超出一行隐藏:

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

【CSS】多行溢出显示省略号的更多相关文章

  1. css解决多行溢出显示省略号

    多行溢出 仅作为记录方便查找 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: number; /*n行溢 ...

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

    现代浏览器中使用css可以实现文本溢出,使用 text-overflow: ellipsis;在有些场景下没有效果,这个时候你需要检查应用的场景是是否是块元素,是否有确切的width. 如果是行内元素 ...

  3. CSS单行文本溢出显示省略号

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

  4. CSS换行文本溢出显示省略号,多行

    首先,div部分 <body> <div>多行的显示该如何解决呢,后面经过一番google后,我找到了chrome的一个API可以解决上面提到的需求-webkit-line-c ...

  5. css实现文本溢出显示省略号

    看到很多网站上的文章列表只显示一部分,之后就是一个阅读全文链接,或者是以一个省略号结尾.今天就说说单行文本,多行文本溢出时怎么显示省略号? 单行 overflow: hidden; white-spa ...

  6. less 多行溢出显示省略号无效

    .body { font-size:14px; font-weight:400; line-height:22px; /*! autoprefixer: ignore next */ -webkit- ...

  7. css 样式文字溢出显示省略号

    在table中使用溢出样式,table样式要设置为”table-layout: fixed“,即<table style="table-layout: fixed;"> ...

  8. css实现单行,多行文本溢出显示省略号……

    1.单行文本溢出显示省略号我们可以直接用text-overflow: ellipsis 实现方法: <style> .div_text{width: 300px; padding:10px ...

  9. CSS实现单行、多行文本溢出显示省略号(…)

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

随机推荐

  1. hibernate课程 初探一对多映射2-2 Myeclipse进行hibernate基本配置

    本节主要内容: 1 myeclipse 中hibernate jar包,mysql连接jar包 导入 2 hibernate.cfg.xml的配置 1 一对一映射已经配置过 2 hibernate.c ...

  2. SSM环境下配置log4j输出sql和异常到控制台和本地日志文件中

    1.引入日志依赖包 <!--解决Spring使用slf4j输出日志与log4j冲突的问题--> <dependency> <groupId>org.slf4j< ...

  3. HihoCoder#1513 : 小Hi的烦恼(五维数点 bitset 分块)

    题意 题目链接 Sol 五位数点问题,写个cdq分治套cdq分治套cdq分治套cdq分析就完了 可以用bitset搞 对于每一科开\(n\)个bitset,其中\(b[i]\)表示的排名为\(1 - ...

  4. react-router + redux + react-redux 的例子与分析

    一个 react-router + redux  + react-redux 的例子与分析 index.js  import React from 'react' import ReactDom fr ...

  5. IEnumerable<T> 用法

    //以下参考来自 http://www.cnblogs.com/wilber2013/p/4299529.html

  6. tomcat下部署项目的流程和遇到的问题笔记

    简单部署流程: 1,解析域名关联到服务器ip 2,配置服务器jre运行环境 3,安装tomcat 4,项目打war包,放入tomcat根目录下webapps(tomcat默认加载的项目目录)目录下 5 ...

  7. Bootstrap开发

    1.BootStrap开发工具 任意前端工具 专门Bootstrap工具:Jetstrap(下载地址:jetstrap.com) 2.官网: www.bootcss.com(“下载Bootstrap” ...

  8. 动态原型模式 js

    动态原型模式 function Person(name,age){ this.name = name; this.age = age; if(typeof this.sayName != " ...

  9. spring教程(一):简单实现(转)

    转:https://www.cnblogs.com/Lemon-i/p/8398263.html  一.概念介绍 1. 一站式框架:管理项目中的对象.spring框架性质是容器(对象容器) 2. 核心 ...

  10. 【转】Activity生命周期详解

    三个循环 提供两个关于Activity的生命周期模型图示帮助理解:                                           图1 图2 从图2所示的Activity生命周期 ...