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

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. PAT 锤子剪刀布

    大家应该都会玩“锤子剪刀布”的游戏:两人同时给出手势,胜负规则如图所示: 现给出两人的交锋记录,请统计双方的胜.平.负次数,并且给出双方分别出什么手势的胜算最大. 输入格式: 输入第 1 行给出正整数 ...

  2. Tomcat 配置必备的 10 个小技巧

    现在开发Java Web应用,建立和部署Web内容是一件很简单的工作.使用Jakarta Tomcat作为Servlet和JSP容器的人已经遍及全世界.Tomcat具有免费.跨平台等诸多特性,并且更新 ...

  3. 2020最新IDEA插件大集合，一款能帮助你写代码的工具是多么重要

    摘要 12款为用户精心打造的Idea插件,含盖前后端,另把使用小技巧分享给大家,提高大家的码率,希望对你们有帮助! Lombok Lombok为Java项目提供了非常有趣的附加功能,使用它的注解可以有 ...

  4. Markdown入门学习202004

    Markdown入门学习202004 推荐使用Typora这款轻量级markdown编辑软件 标题 # 一级标题(井号后面有空格) ## 二级标题 ### 三级标题 ...... ###### 最多到 ...

  5. 浅谈Unity的脚本执行顺序

    一.添加脚本的顺序 这是一张官方的脚本顺序图 一般,当我们把脚本绑定在游戏对象上时,或者点击绑定好的脚本的reset按钮时,会调用Reset() 当我们初始化一个对象时,会先调用Awake()在调用O ...

  6. 【百度前端技术学院 Day7/8】布局

    1. 定位 1.1 文档流 单个元素: 块级元素:内容宽度是其父元素的宽度的100%,并且与其内容一样高. 内联(行内)元素:高宽与他们的内容高宽一样.(所以不能为他们设置宽高) 元素之间的交互: 块 ...

  7. windows tcp server select

    #include <stdio.h> #include <tchar.h> #include <winsock2.h> #include <iostream& ...

  8. [转]记一次linux(被)入侵，服务器变矿机~

    0x00 背景 周一早上刚到办公室,就听到同事说有一台服务器登陆不上了,我也没放在心上,继续边吃早点,边看币价是不是又跌了.不一会运维的同事也到了,气喘吁吁的说:我们有台服务器被阿里云冻结了,理由:对 ...

  9. 《刻意练习之C#》-0016- C#预处理器指令

    预处理指令 这些指令/命令不会转换为可执行代码,但会影响编译过程的各个方面:列如,可以让编译器不编译某一部分代码等. C#中主要的预处理指令 #define和#undef #define指令定义: # ...

  10. redis 深入理解redis 主从复制原理

    redis 主从复制 master 节点提供数据,也就是写.slave 节点负责读. 不是说master 分支不能读数据,也能只是我们希望将读写进行分离. slave 是不能写数据的,只能处理读请求 ...