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. 接口新建学习---HTTP请求默认值

    一.HTTP请求默认值 1.使用场景: 每次访问论坛的地址(服务器名称或IP)是不变的,端口也是不变的,协议也是不变的(http协议),测试的时候需要每个请求都要写一遍,在我们的HTTP请求取样器数量 ...

  2. OpenSSL 常见对称加密算法特性分析

    在选择加密算法,面对一大长串的选项时,大家都有这样的疑问,究竟哪种加密方式是最好的呢? 对于加密方式.算法来说,一般安全性与性能呈负相关,越是安全的,对性能要求则更高. 现在主流的加密协议的安全性均能 ...

  3. TCP/IP网络中的显式拥塞通告(ECN)

    当前的TCP 实现将TCP 端节点之间的中间网络视为一个不透明的"黑盒".TCP 包进入和流出这个盒子.有些时候进入盒子的包被丢失了.因为今天的数字和光媒体上出现比特级错误的机会非 ...

  4. 理解前端模块概念：CommonJs与ES6Module

    前言 现代前端开发每时每刻都和模块打交道.例如,在项目中引入一个插件,或者实现一个供全局使用组件的JS文件.这些都可以称为模块. 在设计程序结构时,不可能把所有代码都放在一起.更为友好的组织方式时按照 ...

  5. 深度学习论文翻译解析（十八）：MobileNetV2: Inverted Residuals and Linear Bottlenecks

    论文标题:MobileNetV2: Inverted Residuals and Linear Bottlenecks 论文作者:Mark Sandler Andrew Howard Menglong ...

  6. Hive on MR调优

    当HiveQL跑不出来时,基本上是数据倾斜了,比如出现count(distinct),groupby,join等情况,理解 MR 底层原理,同时结合实际的业务,数据的类型,分布,质量状况等来实际的考虑 ...

  7. hadoop的Namenode HA原理详解

    为什么要Namenode HA? 1. NameNode High Availability即高可用. 2. NameNode 很重要,挂掉会导致存储停止服务,无法进行数据的读写,基于此NameNod ...

  8. Linux系统磁盘管理（lvm逻辑卷管理）

    linux系统用户常遇到的一个问题就是如何精准的评估分区的大小,已分配合适的磁盘空间:普通的磁盘分区管理方式在逻辑分区划分好之后就无法改变其大小,当一个逻辑分区存放不下某个文件时,这个文件因为受上层文 ...

  9. 利用selenium抓取网页的ajax请求

    部门需要一个自动化脚本,完成web端界面功能的冒烟,并且需要抓取加载页面时的ajax请求,从接口层面判断请求是否成功.查阅了很多资料都没有人有过相关问题的处理经验,在处理过程中也踩了很多坑,所以如果你 ...

  10. 2019CCPC厦门站总结

    这是一篇打铁游记~ $day1$ 坐动车去厦门,三个人买了一堆零食,吃了一路,除了睡觉嘴巴基本就没停过.当然,我们到酒店后也去吃了烧烤,我们虽然是在岛外的厦门北站的下的,还是很幸运的找到一家好吃了,乌 ...