多行文本省略号的实现

<!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. [刷题]算法竞赛入门经典(第2版) 5-8/UVa230 - Borrowers

    //又开学啦,不知不觉成为大二的老人了...时间过得好快啊,感觉好颓废... 题意:建立一个借书/归还系统.有借.还.把还的书插到书架上这三个指令. 代码:(Accepted, 0ms) //UVa2 ...

  2. Jlink下载问题

    在使用Jlink SWD模式进行下载的时候遇到了无法下载的问题. SWD模式下,共有4跟线,VCC.GND.SWCLK.SWDIO JTAG标准接口如下图所示: 一般情况下,目标板卡的 debug V ...

  3. CNPM 遇到use strict的问题

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

  4. Java 8 Learn Notes

    Main reference: [1] http://winterbe.com/posts/2014/03/16/java-8-tutorial/ [2] https://plus.google.co ...

  5. 在服务器上用Fiddler抓取HTTPS流量

    转自:http://yoursunny.com/t/2011/FiddlerHTTPS/在服务器上用Fiddler抓取HTTPS流量 阳光男孩 发表于2011-03-19 开发互联网应用的过程中,常常 ...

  6. 在Spring、Hibernate中使用Ehcache缓存(2)

    这里将介绍在Hibernate中使用查询缓存.一级缓存.二级缓存,整合Spring在HibernateTemplate中使用查询缓存.,这里是hibernate3,使用hibernate4类似,不过不 ...

  7. Linux与mv命令结合，移动文件至指定目录

    转自:http://blog.csdn.net/hardwin/article/details/7711635 把当前目录下面的file(不包括目录),移动到/opt/shell find  .  - ...

  8. 【R与数据库】R ＋ 数据库 ＝ 非常完美

    前言 经常用R处理数据的分析师都会对dplyr包情有独钟,它强大的数据整理功能让原始数据从杂乱无章到有序清晰,便于后期进一步的深入分析,特别是配合上数据库的使用,更是让分析师如虎添翼,轻松搞定Exce ...

  9. 一个html页面传入参数到另一个html页面用js获取方法

    没错使用以下函数就能够完整的获取到路径里的你想要的参数:function getURLParameter(name) { return decodeURIComponent((new RegExp(' ...

  10. 关于在Mac OS下安装npm与cnpm的ERR! Darwin 15.0.0解决办法

    mac os安装好了很久了,不过没怎么用,昨天想要体验一下大神们推荐的黑苹果系统用起来怎么样(关于安装黑苹果的可以到我的简书去看相关文章),于是乎,打开久违的vmware,看着咬一口的苹果进度图,心中 ...