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. IDEA安装问题解决

    一,安装正确的jdk和idea版本 首先在控制面查看电脑位数,电脑是64位的,安装64位的jdk和idea 二.打开正常的快捷键 有两个启动项,打开对应位数的 三,权限问题 如果弹出不能加载jvm的提 ...

  2. 僵尸网络（botnet）概念浅析

    僵尸程序 僵尸程序是用于构建僵尸网络以形成大规模攻击平台的恶意代码.僵尸网络是被黑客集中控制的计算机群,其核心特点是黑客能够通过一对多的命令与控制信道操纵感染僵尸程序的主机执行相同的恶意行为,如可同时 ...

  3. Java并发包源码学习系列：阻塞队列实现之SynchronousQueue源码解析

    目录 SynchronousQueue概述 使用案例 类图结构 put与take方法 void put(E e) E take() Transfer 公平模式TransferQueue QNode t ...

  4. python模块----os模块 （操作系统接口模块）

    os模块提供一种使用与操作系统相关的功能的便捷式途径. 一定要使用 import os 而不是 from os import * .这将避免内建的 open() 函数被 os.open() 隐式替换掉 ...

  5. 小白搭建WNMP详细教程---PHP安装与设置

    php的安装请参考WAMP中PHP的安装教程https://www.cnblogs.com/missbye/p/12049925.html 需要注意的是,我们下载的PHP版本要下载Non Thread ...

  6. Jenkins（8）构建触发器之定时构建和轮询 SCM

    前言 跑自动化用例每次用手工点击jenkins出发自动化用例太麻烦了,我们希望能每天固定时间跑,这样就不用管了,坐等收测试报告结果就行. jenkins的定时任务是用的crontab语法 定时构建语法 ...

  7. 关于数位DP的学习

    ---恢复内容开始--- 因为最近做比赛经常会出现数位DP,便尝试着去学学看数位DP. 先给出两篇论文的链接: <数位计数问题解法研究> <浅谈数位类统计问题> 然后也是寻找了 ...

  8. Codeforces Round #272 (Div. 2) B. Dreamoon and WiFi (暴力二进制枚举)

    题意:给你一个只含\(+\)和\(-\)的字符串,统计它的加减和,然后再给你一个包含\(+,-,?\)的字符串,其中\(?\)可以表示为\(+\)或\(-\),问有多少种情况使得第二个字符串的加减和等 ...

  9. Educational Codeforces Round 94 (Rated for Div. 2) C. Binary String Reconstruction (构造)

    题意:给你一个字符串\(s\),原字符串为\(w\),如果\(i>x\)且\(w_{i-x}=1\),那么\(s_{i}=1\),如果\(i+x\le n\)且\(w_{i+x}=1\),那么\ ...

  10. 二叉排序树的构造 && 二叉树的先序、中序、后序遍历 && 树的括号表示规则

    二叉排序树的中序遍历就是按照关键字的从小到大顺序输出(先序和后序可没有这个顺序) 一.以序列 6 8 5 7 9 3构建二叉排序树: 二叉排序树就是中序遍历之后是有序的: 构造二叉排序树步骤如下: 插 ...