多行文本省略号的实现

<!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. [笔记]scanf的使用（主要是针对char）

    学的是C++,用cin cout也用的很顺溜,写自己的类时重载"<<"与">>"运算符也很爽,但是发现在刷算法竞赛题时,cin cout ...

  2. Node.js~ioredis处理耗时请求时连接数瀑增

    回到目录 关于redis连接数过高的解释 对于node.js开发环境里,使用传统的redis或者使用ioredis都是不错的选择,而在处理大数据请求程中,偶尔出现了连接池( redis服务端的最大可用 ...

  3. 张小龙的野心：用小程序重构web|小程序好处及可能的不足

    一:张小龙的野心:用小程序重构web 一 很多年以前,张小龙写了一款软件:Foxmail. 这款软件当年有数百万用户,这是一个相当庞大的量,因为彼时网民也只有千万当量级的规模. 我是一个非常忠实的用户 ...

  4. .net 非对称加密

    后台   public class RSAHelper     {         /// <summary>         /// RSA加密         /// </sum ...

  5. Embedding R-generated Interactive HTML pages in MS PowerPoint（转）

    Usually when I create slide decks these days I used markdown and slidy.  However, I recently was ask ...

  6. 两种最常用的Sticky footer布局方式

    Sticky footer布局是什么? 我们所见到的大部分网站页面,都会把一个页面分为头部区块.内容区块和页脚区块,当头部区块和内容区块内容较少时,页脚能固定在屏幕的底部,而非随着文档流排布.当页面内 ...

  7. jQuery插件 -- 图片随页面滚动fixed

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. poj3207

    poj3207 题意 平面上,一个圆,圆的边上按顺时针放着n个点.现在要连m条边, 比如a,b,那么a到b可以从圆的内部连接,也可以从圆的外部连接. 给你的信息中,每个点最多只会连接的一条边.问能不能 ...

  9. JavaScript 函数(方法)的封装技巧要领及其重要性

    作为一枚程序猿,想必没有人不知道函数封装吧.在一个完整的项目开发中,我们会在JS代码中对一些常用(多个地方调用)的操作进行一个函数的封装,这样便于我们调试和重复调用,以致于能够在一定程度上减少代码的冗 ...

  10. 机器学习：Python实现聚类算法(三)之总结

    考虑到学习知识的顺序及效率问题,所以后续的几种聚类方法不再详细讲解原理,也不再写python实现的源代码,只介绍下算法的基本思路,使大家对每种算法有个直观的印象,从而可以更好的理解函数中参数的意义及作 ...