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. Manachar’s Algorithm

    Manachar's Algorithm Longest palindromic substring - Wikipedia  https://en.wikipedia.org/wiki/Longes ...

  2. 从零开始学Java (二)Hello

    1.新建Hello.java文件,写入以下内容 1 public class Hello { 2 public static void main(String[] args) { 3 System.o ...

  3. Redis 学习笔记系列文章之 Redis 的安装与配置 (一)

    1. 介绍 Redis is an open source (BSD licensed), in-memory data structure store, used as database, cach ...

  4. CF413C

    正文 题意: 给 n 个关卡,每个关卡得分为 ai,有 m 次机会可以选择一 个关卡通过后不得分,而将现有得分翻倍 你可以安排关卡的通过顺序和策略,求最大得分. 分析: 看到这道题首先想到的就是贪心, ...

  5. LOJ2723

    LOJ2723 Get Luffy Out 题目大意:给你n对钥匙,每对钥匙只可以用其中的任意一个,钥匙有编号,且不重复.有m个大门,每个门上有两个锁,每个锁对应一个编号的钥匙,只要打开两个锁中的一个 ...

  6. 数据分析中常用的Excel函数

    数据分析中excel是一个常见且基础的数据分析工具,要想掌握好它,学会使用其中的常用函数是一个绕不过去的坎.从网上搜集的资料来说,基本上确定了数据分析中Excel的常用函数有以下这六类 数学函数:SU ...

  7. 3.centos 7执行service iptables save报错问题

    1.报错 [root@localhost ~]# service iptables save The service command supports only basic LSB actions ( ...

  8. VS CODE远程办公篇一

    作者:良知犹存 转载授权以及围观:欢迎添加微信:becom_me 总述     因为疫情的来临,让远程办公变得原来越火.这次我也是盯上了这个功能,实现在家里远程配置电脑. 嵌入式Linux开发的程序员 ...

  9. P3381 [模板] 最小费用最大流

    EK  + dijkstra (2246ms) 开氧气(586ms) dijkstra的势 可以处理负权 https://www.luogu.org/blog/28007/solution-p3381 ...

  10. poj2443Set Operation (bitset)

    Description You are given N sets, the i-th set (represent by S(i)) have C(i) element (Here "set ...