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


  2.     .box{
  3.       display: -webkit-box;
  4.       overflow: hidden;
  5.       text-overflow: ellipsis;
  6.       word-wrap: break-word;
  7.       white-space: normal !important;
  8.       -webkit-line-clamp: 3;
  9.       /* 行数 3 */
  10.       -webkit-box-orient: vertical;
  12.     }
  14.     .text {
  15.         font-size: 38rpx;
  16.         overflow: hidden;
  17.         white-space: nowrap;
  18.         text-overflow: ellipsis;
  19.     }

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

  1. ::after{
  2.  content: "...",
  3. }

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. 你的隐私数据真的安全吗之memset（）使用分析

    我们在实际编程中,需要保存许多私有数据,例如:密码.密钥等等.所以,我们需要经常在使用完这些私有数据后,清除内存使用踪迹,以防止被潜在的入侵者获得这些数据.这篇文章中,我们讨论使用memset()函数 ...

  2. Spark练习之通过Spark Streaming实时计算wordcount程序

    Spark练习之通过Spark Streaming实时计算wordcount程序 Java版本 Scala版本 pom.xml Java版本 import org.apache.spark.Spark ...

  3. debian 屌丝日记

    好几年前,刚开始学习linux时,写的笔记,现在看来还挺有意思的,发出来 纪念下   1.安装debian系统,只安装最基本系统 不要桌面,不要print server,具体不会看网上图文并茂的 1) ...

  4. 浅聊TCP的三次握手和四次挥手

    三次握手: 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向Server段发生ACK报文,并分配资源,这样TCP连 ...

  5. CCF-最优配餐（BFS）

    最优配餐   问题描述 栋栋最近开了一家餐饮连锁店,提供外卖服务.随着连锁店越来越多,怎么合理的给客户送餐成为了一个急需解决的问题.栋栋的连锁店所在的区域可以看成是一个n×n的方格图(如下图所示),方 ...

  6. E 快速排序

    :以下代码可以从数组a[]中找出第k小的元素. 它使用了类似快速排序中的分治算法,期望时间复杂度是O(N)的. 请仔细阅读分析源码,填写划线部分缺失的内容. #include <stdio.h& ...

  7. 前n项余数个数和

    一:O(n) 计算贡献:前n项中,能被i(1~n)整除的数的个数为(n/i)个,,也就是 i 给前n项中(n/i)个数做了余数 #include<iostream> using names ...

  8. P2762 太空飞行计划问题 (最小割)

    题意:n个实验 每个实验可获利ai元 做每个实验需要几个仪器 购买每个仪器有不同的花费 不同实验可能会用到同一个仪器 只用购买一次 求最大收益 题解:......................... ...

  9. hdu5432Rikka with Array (数位dp+十进制转化为二进制)

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  10. hdu3341Lost's revenge (AC自动机+变进制dp)

    Time Limit: 15000/5000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others) Total Submissio ...