多行文本省略号的实现

<!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. 用Python设计一个经典小游戏

    这是关于Python的第9篇文章,介绍如何用Python设计一个经典小游戏:猜大小. 在这个游戏中,将用到前面我介绍过的所有内容:变量的使用.参数传递.函数设计.条件控制和循环等,做个整体的总结和复习 ...

  2. 关于cisco ccp 或sdm管理gns3中思科路由器的成功分享

    本来工作环境中有一台c1841,闲来无事,升级了最新的IOS=c1841-adventerprisek9-mz.151-4.M6.bin,在xp虚拟机中安装sdm(新windows系统不支持)和在wi ...

  3. Docker+SpringBoot+Mybatis+thymeleaf的Java博客系统开源啦

    个人博客 对于技术人员来说,拥有自己的个人博客应该是一件令人向往的事情,可以记录和分享自己的观点,想到这件事就觉得有意思,但是刚开始写博客的时候脑海中是没有搭建个人博客这一想法的,因为刚起步的时候连我 ...

  4. Maven学习-构建项目

    创建项目 运行如下命令会创建一个简单的Maven项目. mvn archetype:create -DgroupId=com.netease.learn -DartifactId=simple -Dp ...

  5. OpenCV探索之路（三）：滤波操作

    滤波处理分为两大类:线性滤波和非线性滤波.OpenCV里有这些滤波的函数,使用起来非常方便,现在简单介绍其使用方法. 线性滤波:方框滤波.均值滤波.高斯滤波 方框滤波 #include<open ...

  6. C# 关于操作datatable的列名和删除某一列的数据

    1.获取一个数据集表 DataTable dt = selectDEGS(type, words, KUser); 2.删除某一列 dt.Columns.Remove("TaskID&quo ...

  7. （基础篇 走进javaNIO）第二章-NIO入门

    在本章巾,我们会分别对 JDK 的BIO ,NIO 和JDK 1.7 最新提供的 NI02.0的使用进行详细说明 ,通过流程图和代 码讲解,让大 家体会到随着 Ja va 1/0 类库的 不断发展和改 ...

  8. root用户不能修改iptable文件

    问题: 需要放通IP 端口  执行: vi /etc/sysconfig/iptables, 添加完成后,wq保存,提示文件只读无法保存!!! 解决步骤: 1.查看文件权限  ls -ld /etc/ ...

  9. （数字IC）低功耗设计入门（四）——RTL级低功耗设计

    二.RTL级低功耗设计 前面介绍了系统级的低功耗设计,换句话说就是在系统级降低功耗可以考虑的方面.系统级的低功耗设计,主要是由系统级设计.具有丰富经验的人员实现,虽然还轮不到我们设计,我们了解一下还是 ...

  10. Java微服务框架

    Java的微服务框架dobbo.spring boot.redkale.spring cloud 消息中间件RabbitMQ.Kafka.RocketMQ