平时在写页面过程中，相信大家都遇到过文本显示多行后用省略号代替的问题，来看看代码：

p{

    display: -webkit-box;

    overflow: hidden;

    text-overflow: ellipsis;

    -webkit-line-clamp:;//表示显示12行之后用省略号代替

    -webkit-box-orient:vertical;

}

可以看到，上面的属性是带了-webkit-前缀的，那如果要适应ie的话，能不能在前面加-ms-的前缀呢？

答案是不能，本人亲自测了一下，表示根本没有任何效果；所以找别的办法吧，就是判断当前p标签里面的文字个数，截取到想显示的到的文字，之后的用“...”表示，来看看代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .r-advInfo-itemText{

            padding: 25px 20px;

            background: pink;

            color: #000;

            border-radius: 40px;

            width: 200px;

        }

        .r-advInfo-item p {

            margin-top: 10px;

            font-size: 14px;

            color: #000;

            line-height: 24px;

            margin-top:20px;

        }

    </style>

</head>

<body>

<div class="r-advInfo-itemText">

    <p id="qfr"></p>

</div>

<script>

    LimitNumber('只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字只显示20个文字','qfr',20);

    /*用js限制字数，超出部分以省略号...显示*/

    function LimitNumber(txt,idName,num) {

        var str = txt;

        str = str.substr(0,num) + '...' ;

        var id=document.getElementById(idName);

        id.innerText=str;

    }

</script>

</body>

<html>
以上就可以解决ie下的问题了，拿走不谢！

ie浏览器不支持多行隐藏显示省略号的更多相关文章

  1. CSS实现不换行/自动换行/文本超出隐藏显示省略号

    在写页面的时候,我们经常会需要用到关于文本的换行,强制换行以及显示几行超过显示省略号等,今天我们就对这些问题来做个汇总吧! 1.自动换行 div{ word-wrap:break-word; word ...

  2. CSS——文本超出隐藏显示省略号

    文本超出隐藏显示省略号 1.单行文本的溢出显示省略号 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; // overflo ...

  3. css文字单行/多行超出显示省略号...

    css文字单行/多行超出显示省略号... 项目里写css样式我们经常会遇到将文字超出显示省略号的情况,记录一下以后能用到. 单行超出 .oneline { width:300upx; /*宽度一定要设 ...

  4. css解决多行溢出显示省略号

    多行溢出 仅作为记录方便查找 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: number; /*n行溢 ...

  5. css文本溢出隐藏显示省略号（单行+多行）

    文本超出若干行就换行,这个功能几乎每个文本浏览网站都会用到,实现它的办法也有很多,今天简单的介绍一下实现它的方法.  一. 单行文本不换行,并将超出文本隐藏 .box-content{     ove ...

  6. html5文本超过指定行数隐藏显示省略号

    这个很简单,直接贴代码就好了 HTML <span class="name">博客园是一个面向开发者的知识分享社区.自创建以来,博客园一直致力并专注于为开发者打造一个纯 ...

  7. css文本超出隐藏显示省略号

    p style="width: 300px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;"> 如 ...

  8. Html中文字过多，单行超出和多行超出显示省略号

    本博客主要介绍 前端开发中文本过多,以省略号显示. 效果如图:                单行: <!--单行--> <p class="pl">这个属 ...

  9. css 实现文本换行及显示不下隐藏显示省略号

    CSS文本超出2行就隐藏并且显示省略号 转载:https://www.cnblogs.com/wyaocn/p/5830364.html   今天做东西,遇到了这个问题,百度后总结得到了这个结果. 首 ...

随机推荐

  1. java实现猜生日

    ** 猜生日** 今年的植树节(2012年3月12日),小明和他的叔叔还有小伙伴们一起去植树.休息的时候,小明的同学问他叔叔多大年纪,他叔叔说:"我说个题目,看你们谁先猜出来!" ...

  2. YAML语法：

    1.基本语法 k:(空格)v:表示一对键值对(空格必须有): 以空格的缩进来控制层级关系:只要是左对齐的一列数据,都是同一个层级的 server: port: 8081 path: /hello 属性 ...

  3. Nginx 的变量究竟是怎么一回事？

    之前说了很多关于 Nginx 模块的内容,还有一部分非常重要的内容,那就是 Nginx 的变量.变量在 Nginx 中可以说无处不在,认识了解这些变量的作用和原理同样是必要的,下面几乎囊括了关于 Ng ...

  4. Deno 初探

    前言 Deno 已经被前端圈子提及有很长一段时间了,上个月 Deno 发布了 1.0 版本,又掀起了一小股 Deno 热.Deno 到底是什么?它可以用来做什么呢?它好用吗?带着一直以来的好奇心,趁着 ...

  5. redis5.0.7集群搭建

    这里实验的是129.130.240三台服务器6个节点的部署(redis集群最低要6个节点,不然无法创建). 1.压缩包安装 #wget http://download.redis.io/release ...

  6. 囚徒问题(100 prisoners problem)的python验证

    密码学课上老师介绍了这样一个问题,囚徒问题(100 prisoners problem):一百个囚徒被关在牢房里,典狱长给他们最后一次机会,100人依次进入一个有100个抽屉的牢房,每个抽屉置乱放入1 ...

  7. Zookeeper——分布式一致性协议及Zookeeper Leader选举原理

    文章目录 一.引言 二.从ACID到CAP/BASE 三.分布式一致性协议 1. 2PC和3PC 2PC 发起事务请求 事务提交/回滚 3PC canCommit preCommit doCommit ...

  8. 玩Python小游戏猜数字，在游戏中掌握基础，你还能学不会？

    学python怎么离得开案例呢? 今天再继续给大家分享一个Python教程里的猜数字游戏     我最近也是在学python,从事编程工作几年了,但是python还是今年才开始玩的,不得不说,这真是一 ...

  9. 记录工作中遇到的BUG，经典的数据库时区问题和字段类型tinyint(1)问题

    记录工作中发现的相对而言经典的问题 [数据库时区问题] 我个人数据库配置为CST 如下 我们测试环境的数据库配置为UTC 如下 倘若我修改了测试环境数据库时区为CST.由此造成的问题是 系统读取到数据 ...

  10. WeChair项目Alpha冲刺(10/10)

    团队项目进行情况 1.昨日进展    Alpha冲刺第十天 昨日进展: 前端:安排页面美化,设计实名认证 后端:更新dao层代码 数据库:修改数据表属性,与后端部署数据库交互 2.今日安排 前端:继续 ...