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

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. lambda操作DataTable进阶版

    using System;using System.Collections.Generic;using System.Data;using System.Linq;using System.Text; ...

  2. dfs算法总结

    DFS 深度优先搜索 主要有两种实现方法:栈和递归 什么是DFS?说白了就是一直遍历元素的方式而已,我们可以把它看成是一条小蛇,在每个分叉路口随意选择一条路线走,直到撞到南墙,才会调头返回到上一个分叉 ...

  3. Linux磁盘空间容量不够-通过新增磁盘-挂载原磁盘

    首先上一张图 -------1)首先fdisk 一块磁盘并格式化 mkfs.ext4 /dev/sda15 --------2)将此磁盘挂载在mnt目录下,并将磁盘容量不够的磁盘所有文件进行复制到mn ...

  4. 重学 Java 设计模式：实战组合模式(营销差异化人群发券，决策树引擎搭建场景)

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获! 一.前言 小朋友才做选择题,成年人我都要 头几年只要群里一问我该学哪个开发语言,哪个语言最好. ...

  5. 死啃了String源码之后

    Java源码之String 说在前面: 为什么看源码: 最好的学习的方式就是模仿,接下来才是创造.而源码就是我们最好的模仿对象,因为写源码的人都不是一般的人,所以用心学习源码,也就可能变成牛逼的人.其 ...

  6. spring cloud系列教程第八篇-修改服务名称及获取注册中心注册者的信息

    spring cloud系列教程第八篇-修改服务名称及获取注册中心注册者的信息 本文主要内容: 1:管理页面主机名及访问ip信息提示修改 2:获取当前注册中心的服务列表及每个服务对于的服务提供者列表 ...

  7. 素数筛 : Eratosthenes 筛法, 线性筛法

    这是两种简单的素数筛法, 好不容易理解了以后写篇博客加深下记忆 首先, 这两种算法用于解决的问题是 : 求小于n的所有素数 ( 个数 ) 比如 这道题 在不了解这两个素数筛算法的同学, 可能会这么写一 ...

  8. 数据库整理（三） SQL基础

    数据库整理(三) SQL基础 SQL语言的特点 集数据定义语言(DDL),数据操纵语言(DML),数据控制语言(DCL)功能于一体. 可以独立完成数据库生命周期中的全部活动: ​ ●定义和修改.删除关 ...

  9. Java 源码刨析 - 线程的状态有哪些？它是如何工作的？

    线程(Thread)是并发编程的基础,也是程序执行的最小单元,它依托进程而存在. 一个进程中可以包含多个线程,多线程可以共享一块内存空间和一组系统资源,因此线程之间的切换更加节省资源.更加轻量化,也因 ...

  10. Linux下搭建mysql

    [准备环境] Linux   centos7 [mysql安装步骤] 1.首先确定centos版本 cat /etc/redhat-release 2.yum安装 yum -y install mar ...