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. memory barrier 内存屏障 编译器导致的乱序

    小结: 1. 很多时候,编译器和 CPU 引起内存乱序访问不会带来什么问题,但一些特殊情况下,程序逻辑的正确性依赖于内存访问顺序,这时候内存乱序访问会带来逻辑上的错误, 2. https://gith ...

  2. libuv线程通信

    目录 1.说明 2.API 2.1.uv_async_init 2.2.uv_async_send 2.3.uv_close 3.代码示例 1.说明 用于多线程之间传递参数 2.API 2.1.uv_ ...

  3. 收集整理Idea常用配置及插件

    收集整理Idea常用配置及插件 一.IDEA配置 1.1 代码智能提示,忽略大小写 二.IDEA插件 2.1 Background Image Plus 2.2 Codota-代码智能提示 2.3 S ...

  4. 小白搭建WAMP详细教程---mysql安装与设置

    MySQL分为安装版和解压版.为了以后MySQL出问题想重装时会出现各种不必要的麻烦,我们这里选择解压版MySQL.详细步骤如下: 一:Mysql官网下载Mysql解压版 到官网下载,网址为:http ...

  5. linux 一分钟安装maven linux

    mkdir maven cd maven/ wget https://mirrors.tuna.tsinghua.edu.cn/apache/maven/maven-3/3.6.3/binaries/ ...

  6. 设计模式（四）——Java抽象工厂模式

    抽象工厂模式 1 基本介绍 1) 抽象工厂模式:定义了一个 interface 用于创建相关或有依赖关系的对象簇,而无需指明具体的类 2) 抽象工厂模式可以将简单工厂模式和工厂方法模式进行整合. 3) ...

  7. 一文弄懂-Netty核心功能及线程模型

    目录 一. Netty是什么? 二. Netty 的使用场景 三. Netty通讯示例 1. Netty的maven依赖 2. 服务端代码 3. 客户端代码 四. Netty线程模型 五. Netty ...

  8. Linux远程拷贝scp

    Linux的scp命令可以实现两台服务器之间互相拷贝文件,我的测试环境是Centos6.4. 基本的命令格式 scp 拷贝目标文件 远程用户@远程主机地址:远程目录 一.从本机拷贝到目标远程主机 # ...

  9. MySQL常用SQL语句2

    -- 1创建student和score表 CREATE TABLE Student( Id INT(10) PRIMARY KEY auto_increment, Name VARCHAR(20) N ...

  10. hdu 6681 Rikka with Cake(扫描线)

    题意:给你一个n*m的的矩形框 现在又k条射线 问这个矩形框会被分为多少个区域 思路:之前的想法是枚举边界然后线段树扫一遍计算一下矩形个数 复杂度果断不行 后面发现其实答案就是交点数+1 然后就用线段 ...