多行文本省略号的实现

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

    .d1 {

        width: 300px;

        height: 200px;

        border: 1px solid #ccc;

        overflow: hidden;

        text-overflow: ellipsis;

        display: -webkit-box;

        -webkit-line-clamp:6;

        -webkit-box-orient:vertical;

    }

    }

</style>

</head>

<body>

<div class="d1">

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus qui, sed laudantium? 
    Hic facilis eius eveniet quisquam, voluptatibus molestias, soluta. Odit dicta et omnis 
    fugiat magnam commodi reiciendis consequatur quosLorem ipsum dolor sit amet, consectetur 
    adipisicing elit. Impedit quis dolore, assumenda veniam deserunt suscipit maxime, magni 
    doloremque excepturi praesentium ea ullam earum rem vel voluptatibus ex omnis odio ipsum.

</div>

</body>

</html>

需要知道的几个属性：

  • text-overflow: ellipsis：用来实现单行文本的溢出显示省略号（...）;在多行文本的情况下，用省略号(...)隐藏超出范围的文本
  • display: -webkit-box：将对象作为弹性伸缩盒子模型显示
  • -webkit-line-clamp:6：用来限制在一个块元素显示文本的行数
  • -webkit-box-orient:vertical：设置或检索伸缩盒对象的子元素排列方式

多行文本省略号的实现.html的更多相关文章

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

    CSS 设置多行文本省略号 ... .box{ display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-wrap: ...

  2. css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...

  3. css多行文本省略号（...）

    如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现单行文本省略 <!DOCTYPE html ...

  4. css多行文本省略号

    适用于内核为webkit的浏览器: display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflo ...

  5. [CSS备忘]多行文本省略号

    overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box ...

  6. 微信小程序之多行文本省略号

    最近在捣鼓小程序,期间遇到的问题,踩过的坑,也是在网上各种搜.这里也说下我解决的问题,方便大家. 在小程序首页显示文本列表的时候,为了美观,不希望把所有的文本都显示出来,希望是显示前几行(比如前3行, ...

  7. 多行文本省略号样式失效丢失，以及控制台显示autoprefixer警告'Autoprefixer applies control comment to whole block, not to next rules.'

    问题现象   使用webpack压缩打包vue项目,遇到一个问题,文本多行显示省略号的关键css语句-webkit-box-orient: vertical;莫名其妙丢失失效了.查阅资料,有不少人提出 ...

  8. taro 如何展示多行文本 省略号

    taro 如何展示多行文本 省略号 webkit-box-orient: vertical; See the Pen Pure CSS multiline text with ellipsis by ...

  9. css单行文本与多行溢出文本的省略号问题

    在文字布局和代码编写过程中遇到文本溢出是常有的事,下面总结一下对于单行文本溢出和多行文本溢出省略号的处理. 一.单行文本省略号 <p class="text1"> 这是 ...

随机推荐

  1. vue视频学习笔记

    video 7 vue问题: 论坛 http://bbs.zhinengshe.com------------------------------------------------UI组件 别人提供 ...

  2. 记MSSQL数据库sa账号短时间密码失效问题

    在腾讯云服务器上安装了MSSQL2012,64位英文版本. sa账号的密码需要在一定时间内失效,无法访问.当时密码设置为admin@123. 最后修改了密码,改为比较复杂的密码,包含特殊字符,不包含a ...

  3. ZooKeeper监听机制

    前言:Zookeeper的监听机制很多人都踩过坑,感觉实现了watcher 接口,后面节点的变化都会一一推送过来,然而并非如此. Watch机制官方声明:一个Watch事件是一个一次性的触发器,当被设 ...

  4. Spring+SpringMVC+MyBatis深入学习及搭建(三)——MyBatis全局配置文件解析

    转载请注明出处:http://www.cnblogs.com/Joanna-Yan/p/6874672.html 前面有写到Spring+SpringMVC+MyBatis深入学习及搭建(二)——My ...

  5. php.ini 文件中配置的意义注释

    ;;;;;;;;;;;;;;;;;;;; About php.ini   ;  //关于php;;;;;;;;;;;;;;;;;;;; PHP's initialization file, gener ...

  6. CNPM 遇到use strict的问题

    一.问题描述 [root@VM_123_144_centos node01]# cnpm install --save nodemailer /usr/lib/node_modules/cnpm/no ...

  7. md5加密解析

    MD5加密算法解析 知识库连接: http://baike.baidu.com/view/7636.htm http://baike.baidu.com/subview/350813/7544439. ...

  8. 200 OK (from cache)原因

    Meta标签中的http-equiv用来标记不可缓存或过期时间,但效果一般.而且代理缓存基本不访问HTML文档内容,所以尽量少用meta标签控制缓存. Pragma: no-cache Forces ...

  9. 8.Java 加解密技术系列之 PBE

    Java 加解密技术系列之 PBE 序 概念 原理 代码实现 结束语 序 前 边的几篇文章,已经讲了几个对称加密的算法了,今天这篇文章再介绍最后一种对称加密算法 — — PBE,这种加密算法,对我的认 ...

  10. Openstack虚拟机在线迁移(Live Migration)

    Openstack VM live migration can have 3 categories: -Block live migration without shared storage -Sha ...