CSS 设置多行文本省略号 ...



    .box{

      display: -webkit-box;

      overflow: hidden;

      text-overflow: ellipsis;

      word-wrap: break-word;

      white-space: normal !important;

      -webkit-line-clamp: 3;

      /* 行数 3 */

      -webkit-box-orient: vertical;

    }

    .text {

        font-size: 38rpx;

        overflow: hidden;

        white-space: nowrap;

        text-overflow: ellipsis;

    }

js 计算 容器高度 = line-height * lines

::after{

 content: "...",

}

See the Pen Pure CSS multiline text with ellipsis by xgqfrms
(@xgqfrms) on CodePen.

refs

https://codepen.io/xgqfrms/pen/NWxejZR

https://codepen.io/xgqfrms/pen/qeZpEd

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

CSS 设置多行文本省略号 ...的更多相关文章

  1. 多行文本省略号的实现.html

    多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. css 设置多行文本的行间距

    css 设置多行文本的行间距 block element span .ticket-card-info{ line-height:16px; display: inline-block; } .tic ...

  3. css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...

  4. css多行文本省略号（...）

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

  5. css多行文本省略号

    适用于内核为webkit的浏览器: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflo ...

  6. [CSS备忘]多行文本省略号

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box ...

  7. 多行文本省略号样式失效丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

    问题现象   使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...

  8. 微信小程序之多行文本省略号

    最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...

  9. css设置水平垂直居中

    关于CSS设置水平以及垂直居中的解决方案 想要水平居中? 内联的元素(文字)? .center-children { text-align: center;} 块级元素? .center-me { m ...

随机推荐

  1. Building a high performance JSON parser

    Building a high performance JSON parser https://dave.cheney.net/high-performance-json.html

  2. 对话 CTO〡用声音在一起，听荔枝 CTO 丁宁聊 UGC 声音互动平台的技术世界 原创 王颖奇 极客公园 2018-12-01

    https://mp.weixin.qq.com/s/jfHFXZpzbAEbHKkCMSev6w 对话 CTO〡用声音在一起,听荔枝 CTO 丁宁聊 UGC 声音互动平台的技术世界 原创 王颖奇 极 ...

  3. 洛谷P3833

    Description 树链剖分板子题 考查两种操作 A u v w 把 u 节点到 v 节点路径上所有节点权值加 w Q u 求以 u 为根节点的子树权值之和 首先需要了解线段树和 dfs 序,我这 ...

  4. 最简单直接地理解Java软件设计原则之依赖倒置原则

    理论性知识 定义 依赖倒置原则,Dependence Inversion Principle (DIP) 高层模块不应该依赖低层模块.二者都应该依赖其抽象. 抽象不应该依赖细节,细节应该依赖抽象. 针 ...

  5. Java基础图解，JVM，线程，Spring，TCP，SpringMVC等开发体系图解

    Java基础图解,JVM,线程,Spring,TCP,SpringMVC等开发体系图解 1.Java虚拟机运行时数据区图 2. 堆的默认分配图 3.方法区结构图 4.对象的内存布局图 5.对象头的Ma ...

  6. yuan先生博客地址

    1 Web应用  https://www.cnblogs.com/yuanchenqi/articles/8869302.html2 http协议 https://www.cnblogs.com/yu ...

  7. Arduino字符串笔记

    Arduino里的字符串笔记 1 字符串转数字 String To Int /* 使用String.toInt()将字符串转为数字示例 */ String inString = "" ...

  8. 2020 ICPC Universidad Nacional de Colombia Programming Contest

    2020 ICPC Universidad Nacional de Colombia Programming Contest A. Approach 三分 显然答案可以三分,注意\(eps\)还有两条 ...

  9. 2. Linear Regression with One Variable

    Speaker:Andrew Ng 这一次主要讲解的是单变量的线性回归问题. 1.Model Representation 先来一个现实生活中的例子,这里的例子是房子尺寸和房价的模型关系表达. 通过学 ...

  10. 【poj 2478】Farey Sequence（数论--欧拉函数 找规律求前缀和）

    题意:定义 Fn 序列表示一串 <1 的分数,分数为最简分数,且分母 ≤n .问该序列的个数.(2≤N≤10^6) 解法:先暴力找规律(代码见屏蔽处),发现 Fn 序列的个数就是 Φ(1)~Φ( ...