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

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实现第五届蓝桥杯殖民地

    殖民地 带着殖民扩张的野心,Pear和他的星际舰队登上X星球的某平原.为了评估这块土地的潜在价值,Pear把它划分成了M*N格,每个格子上用一个整数(可正可负)表示它的价值. Pear要做的事很简单- ...

  2. TZOJ 车辆拥挤相互往里走

    102路公交车是crq经常坐的,闲来无聊,他想知道最高峰时车上有多少人,他发现这辆车只留一个门上下人,于是他想到了一个办法,上车时先数一下车上人员数目(crq所上的站点总是人不太多),之后就坐在车门口 ...

  3. 真香，撸一个SpringBoot在线代码修改器

    前言 项目上线之后,如果是后端报错,只能重新编译打包部署然后重启:如果仅仅是前端页面.样式.脚本修改,只需要替换到就可以了. 小公司的话可能比较自由,可以随意替换,但是有些公司权限设置的比较严格,需要 ...

  4. 微信小程序实现连续扫码功能（uniapp）

    注:本文使用的是 uniapp 语法. 微信小程序提供了扫码API:wx.scanCode,但它只能扫一次码,想要实现连续扫码,需要借用 camera 组件.camera 组件不仅能拍照,还具有扫码功 ...

  5. ubuntu12.04 串口登录系统配置

    原文转自:http://blog.csdn.net/g__gle/article/details/8663239 1) Create a file called /etc/init/ttyS0.con ...

  6. C# .net framework .net core 3.1 请求参数校验, DataAnnotations, 自定义参数校验

    前言 在实际应用场景中我们常常要对接口的入参进行校验, 例如分页大小是否正确, 必填参数是否已经填写等等. 最简单的实现方式如下图, 这种在实际开发中代码过于冗余, 而且不灵活. 今天介绍一种统一参数 ...

  7. 关于Api的那些事儿！

    工作中一直在写Api数据接口,但大部分的Api都存在这样的问题 1.接口请求的地址和参数暴露 2.重要接口返回数据明文暴露 3.APP登录态请求的数据完全性问题 4.代码层的数据完全性问题(从代码层有 ...

  8. 如何在python列表中查找某个元素的索引

    如何在python列表中查找某个元素的索引 2019-03-15 百度上回复别人的问题,几种方式的回答: 1) print('*'*15,'想找出里面有重复数据的索引值','*'*15) listA ...

  9. Codeforces Round #647 (Div. 2)

    Problem A https://codeforces.com/contest/1362/problem/A 判断x/y是不是2的k次方, 如果是 k/3 + (k%3)/2 + (k%3%2)即为 ...

  10. LR字符串处理函数-lr_save_string

    int lr_save_string( const char *param_value, const char *param_name) 指定字符串保存至参数 Action() { lr_save_s ...