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

实现单行文本省略

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div {

                margin:0 auto ;

                width:300px;

                color: red;

                overflow: hidden;

                text-overflow: ellipsis;

                white-space: nowrap;

            }

        </style>

    </head>

    <body>

        <div>单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略单行文本省略</div>

    </body>

</html>

结果

实现多行文本省略

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            div {

                margin: 0 auto;

                width: 300px;

                color: red;

                display: -webkit-box;

                -webkit-box-orient: vertical;

                -webkit-line-clamp:;

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <div>多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略多行文本省略</div>

    </body>

</html>

结果

注意：CSS3属性记得添加前缀，如

 -webkit-box-orient

css多行文本省略号（...）的更多相关文章

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

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

  2. css多行文本省略号

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

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

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

  4. 多行文本省略号的实现.html

    多行文本省略号的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

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

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

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

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

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

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

  8. css多行文本垂直居中问题研究

    css多行文本垂直居中问题研究 <body> <h2>垂直居中对齐</h2> <style> *{margin:0; padding:0;} div { ...

  9. css 多行文本的溢出显示省略号(移动端)

    多行文本的溢出显示省略号(移动端) 一.单行文本的溢出显示省略号(通用) .mui-ellipsis { overflow: hidden; /*规定当文本溢出包含元素时发生的事情*/ white-s ...

随机推荐

  1. 2016级算法期末上机-A.简单·Bamboo's Fight with DDLs I

    简单·Bamboo's Fight with DDLs I 分析 一句话:要装满的完全背包问题. 对比完全背包只有一点要改变:初始化为负无穷 传送门: https://buaacoding.cn/pr ...

  2. iOS应用发布中的一些细节

    iOS应用发布中的一些细节 前言 这几天最大的新闻我想就是巴黎恐怖袭击了,诶,博主每年跨年都那么虔诚地许下“希望世界和平”的愿望,想不到每年都无法实现,维护世界和平这么难,博主真是有心无力啊,其实芸芸 ...

  3. SpringBoot 整合 中国移动 MAS HTTP1.0 实现短信发送服务

    因为客户需要,本身使用的 阿里云的短信服务改为了中国移动MAS HTTP 1.0  短信通知,因为看到网络上关于此类的博客知识很少,再趟完坑后特地写下这篇博客,提醒后来人. 特别感谢 中国移动MAS ...

  4. allure报告定制（pytest+jenkins）

    环境及安装可查看 pytest+jenkins安装+allure导出报告 要让allure报告更漂亮,更直观,需要在脚本中写入allure特性 一开始allure调用step().story().fe ...

  5. 安卓monkey自动化测试，软硬回车

    1.Monkey程序介绍 在android手机上做自动化测试,monkey比cts,Android UnitTest 好用多了,他其实是继承与adb shell中的一段的shell指令. monkey ...

  6. Axis2 Web Service Development & Deployment Guide(Axis2使用)

    主要内容: 记录关于Axis2的使用,通过WSDL文件生成Web service的客户端和服务器端的过程. 目录: Requirement(必备工具) Development - Client Gen ...

  7. 原创：centos7.1下 ZooKeeper 集群安装配置+Python实战范例

    centos7.1下 ZooKeeper 集群安装配置+Python实战范例 下载:http://apache.fayea.com/zookeeper/zookeeper-3.4.9/zookeepe ...

  8. [DPF] DB2 DPF 搭建实战

    1. Server 准备 2. NFS 系统设置 3. 创建实例 4. rsh/ssh 5. 测试 Server: 192.168.122.1  dpf01.dpf.com  dpf01 192.16 ...

  9. Tomcat *的下载（绿色版和安装版都适用）

    不多说,直接干货! 1.先下载tomcat,到http://tomcat.apache.org/ 2.注意:下载可以下载zip格式或exe格式的,其中zip格式的只要解压缩再配置下环境变量就可以使用了 ...

  10. 全网最详细的Git学习系列之介绍各个Git图形客户端（Windows、Linux、Mac系统皆适用ing）（图文详解）

    不多说,直接上干货! 一.TortoiseGit - The coolest Interface to Git Version Control TortoiseGit 是 TortoiseSVN 的  ...