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. Linux内核[CVE-2016-5195] (dirty COW)原理分析

    [原创]Linux内核[CVE-2016-5195] (dirty COW)原理分析-二进制漏洞-看雪论坛-安全社区|安全招聘|bbs.pediy.com https://bbs.pediy.com/ ...

  2. vue-router实现路由懒加载（ 动态加载路由 ）

    三种方式第一种:vue异步组件技术 ==== 异步加载,vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件.第二种:路由懒加载 ...

  3. 系列trick - 建图

    对偶图 主体思想:平面图的割,等价于对偶图的路 例题:[BeiJing2006]狼抓兔子 网上有114514篇题解,这里不赘述 点变边 主体思想:点带点权,而要在点上实现一些在边上的问题,比如最小割点 ...

  4. Nginx配置WebSocket反向代理(Tomcat+Nginx)

    @toc WebSocket 和HTTP协议不同,但是WebSocket中的握手和HTTP中的握手兼容,它使用HTTP中的Upgrade协议头将连接从HTTP升级到WebSocket.这使得WebSo ...

  5. scala中List、Array、ListBuffer、ArrayList、Set

    scala中List.Array.ListBuffer.ArrayList.Set 一.List 二.Array 三.LIstBuffer 四.ArrayBuffer 五.Set 一.List Lis ...

  6. 用到的API整理

    时间 淘宝 http://api.m.taobao.com/rest/api3.do?api=mtop.common.getTimestamp 获取时间戳,调用效果 { "api" ...

  7. docker（9）Dockerfile制作镜像

    前言 如果我们已经安装了一个python3的环境,如果另一台机器也需要安装同样的环境又要敲一遍,很麻烦,这里可以配置Dockerfile文件,让其自动安装,类似shell脚本 Dockerfile编写 ...

  8. MySQL的安装、改密及远程连接

    一.下载MySQL压缩包后的安装步骤 将压缩包解压到指定的目录 编辑好配置文件 [mysql] #设置MySQL客户端默认字符集 default-character-set=utf8 [mysqld] ...

  9. 调试lcd时候给linux单板移植tslib

    作者:良知犹存 转载授权以及围观:欢迎添加微信公众号:Conscience_Remains 总述  tslib背景: 在采用触摸屏的移动终端中,触摸屏性能的调试是个重要问题之一,因为电磁噪声的缘故,触 ...

  10. 【noi 2.6_2988】计算字符串距离（DP）

    题意: 给两个字符串,可以增.删.改,问使这两个串变为相同的最小操作数. 解法:(下面2种的代码主要区别在初始化和,而状态转移方程大家可挑自己更容易理解的方法打) 1.f[i][j]表示a串前i个和b ...