参考:https://www.cnblogs.com/yangguojin/p/10301981.html

超出一行省略:

p{

  white-space:nowrap;

  overflow:hidden;

  text-overflow:ellipsis; 

}

超出2行省略:

p {

  overflow:hidden; 

  text-overflow:ellipsis; 

  display: -webkit-box;

  -webkit-box-align: start; //让内容居左

   /*! autoprefixer: off */

  -webkit-box-orient:vertical; 

  /* autoprefixer: on */
  -webkit-line-clamp:2; }

注:两行注释必须要!因为 webpack打包后-webkit-box-orient会被移除,autoprefixer会自动移除老式过时的代码,所以需要添加注释关闭autoprefixer。如果有清除注释的插件,将该插件设为false,否则不生效。

但当css样式为外部引入时,这样写会报警告:Second Autoprefixer control comment was ignored. Autoprefixer applies control comment to whole block, not to next rules.
需修改为:

/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

css 超出两行省略号,超出一行省略号的更多相关文章

  1. CSS div内文字显示两行,超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  2. JS控制文字只显示两行,超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

  3. css把超出的部分显示为省略号的方法兼容火狐

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

  4. CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  5. css 超过一行省略号

    //超过一行省略号 overflow: hidden; white-space: nowrap; text-overflow: ellipsis; //超过两行省略号 overflow: hidden ...

  6. CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法

    CSS样式实现溢出超出DIV边框宽度高度的内容自动隐藏方法 平时我们布局时候,有的文字内容多了会超过溢出我们限制的高度,有的图片会撑破DIV,让网页错位变乱. 这样我们就需要解决如何使用CSS来超出设 ...

  7. 翻译:如何使用CSS实现多行文本的省略号显示

    本文翻译自CSS Ellipsis: How to Manage Multi-Line Ellipsis in Pure CSS,文中某些部分有些许改动,并添加译者的一些感想,请各位读者谅解. 合理的 ...

  8. css 文本两行显示,超出省略号表示

     重点:text-overflow: ellipsis;只对display:inline:起作用 例子: <span class="a">我说说<b class= ...

  9. css文本强制两行超出就显示省略号,不显示省略号

    1. 强制一行的情况很简单 overflow:hidden; //超出的隐藏 text-overflow:ellipsis; //省略号 white-space:nowrap; //强制一行显示 2. ...

随机推荐

  1. APB简介

    一.血缘 AMBA: Advanced Microcontroller Bus Architecture 高级处理器总线架构 AHB: Advanced High-performance Bus 高级 ...

  2. java变量和数据类型

    变量 数据类型  变量名  =  数据值: 注意事项: 变量定义后可以不赋值,使用时再赋值.不赋值不能使用 变量使用时有作用域的限制. 变量不可以重复定义 数据类型转换 自动类型转换  范围大的数据类 ...

  3. FP function programming

    fp是函数式编程,也是一种编程方法,同面向对象的编程方法一样. 所谓的functional programming 就是函数式编程,这也是一种编程方法,或者说是编程模式,同面向过程的编程,以及面向对象 ...

  4. python相关小技巧整理[持续更新]

    1. pdb的非常方便的debug,抛弃print吧~ 参考https://www.ibm.com/developerworks/cn/linux/l-cn-pythondebugger/ impor ...

  5. ssm下使用分页插件PageHelper进行分页

    1. 导入maven依赖: <dependency> <groupId>com.github.pagehelper</groupId> <artifactId ...

  6. Linux权限命令chmod

    一.Linux chmod命令修改文件和文件目录权限(默认情况下只有root用户才能使用).命令格式:chmod+修改内容+要修改的文件或者 目录 或者 chmod -R 修改内容 要修改的文件或者 ...

  7. 程序员如何面对 HR 面试的 40 个问题!

    讲一个身边朋友亲身经历的故事吧. 一个技术非常牛的朋友去阿里面试,成功通过了几轮技术车轮战,最后躺在了 HR 面上...所以,尽管你技术再牛逼,你回答不好 HR 的问题,赢得不了 HR 的认可,你最终 ...

  8. 03_mybatis配置文件详解

    1. SqlMapConfig.xml mybatis全局配置文件SqlMapConfig.xml,配置内容如下: *properties(属性) setting(全局配置参数) typeAliase ...

  9. SpringBoot之集成通用Mapper

    第一种: 1.引入POM坐标,需要同时引入通用mapper和jpa <dependency> <groupId>tk.mybatis</groupId> <a ...

  10. 一个tcp连接可以发多少http请求

    -----来自:松若章 -----zhuanlan.zhihu.com/p/61423830 曾经有这么一道经典面试题:从 URL 在浏览器被被输入到页面展现的过程中发生了什么?相信大多数准备过的同学 ...