<style type="text/css">

        * {

            padding: 0;

        }

        .div01 , .div02 {

            margin-top: 10px;

            border: 1px solid black;

        }

        .div01 {

            width: 150px;

            height: 80px;

            display: -moz-box;  /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */

            display: -webkit-box;

            -moz-box-orient: vertical;/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */

            -webkit-box-orient: vertical;

            -webkit-line-clamp: 3;

            overflow: hidden;

        }

        .div02 {

            width: 150px;

            white-space: nowrap;

            overflow: hidden;

            text-overflow: ellipsis;

            word-break: break-all;

        }

    </style>

    <body>

        <div class="div01">

            <p>测试多行文字省略:测试多行文字省略测试多行文字省略测试多行文字省略测试多行文字省略测试多行文字省略</p>

        </div>

        <div class="div02">

            <p>测试单行文字省略:测试单行文字省略测试单行文字省略</p>

        </div>

    </body>

运行后显示如下：

万能解决方式：针对一行和多行的省略显示

<style type="text/css">

        * {

            padding: 0;

        }

        .div01 , .div02 {

            margin-top: 10px;

            border: 1px solid black;

            width: 150px;

            height: 80px;

            display: -moz-box;  /* 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 */

            display: -webkit-box;

            -moz-box-orient: vertical;/* 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 */

            -webkit-box-orient: vertical;

            overflow: hidden;

        }

        .div01 {

            -webkit-line-clamp: 3;

        }

        .div02 {
　　　　　　　height:40px;

            -webkit-line-clamp: 1;

        }

    </style>

    <body>

        <div class="div01">

            <p>测试多行文字省略:测试多行文字省略测试多行文字省略测试多行文字省略测试多行文字省略测试多行文字省略</p>

        </div>

        <div class="div02">

            <p>测试单行文字省略:测试单行文字省略测试单行文字省略</p>

        </div>

    </body>

运行结果：

方法三：

js超出隐藏

/**

     * str(需要截取的字符串)

     * num(需要截取的字符串字数)

     */

    isOverLength(str,num) {

        var consultArray = str;

        for(var i=0; i<consultArray.length; i++){

            var txt = consultArray[i].innerText;

            if(txt.length <= num){

                return;

            }else {

                consultArray[i].innerText = txt.substr(0,num) + '...';

            }

        }

    }

问题1：设置了text-overflow : ellipsis未起作用的更多相关文章

  1. jquery easyui-linkButton获取和设置按钮text并且解决火狐不支持innerText的方法

    <a href="javascript:test" id="btn" class="easyui-linkbutton" iconCl ...

  2. [转] 设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿

    设置div的overflow:scroll,但是在手机上滑动的时候有点卡顿,所以在这个div上加一个css: -webkit-overflow-scrolling : touch; 在苹果手机上使用- ...

  3. uitabbar 标题设置 button text attributes only respected for UIControlStateNormal

    uitabbar 标题设置 button text attributes only respected for UIControlStateNormal [[UITabBarItem appearan ...

  4. sublime点击预览未起作用?教你如何设置支持浏览器预览

    我用的text3版,其他版本未试,但应该也有效. 安了个view in browser插件,然而点击预览未起作用. 搜解决方法,发现了另一个插件,sidebar enhancements,设置快捷键预 ...

  5. jQuery - 设置内容和属性 设置内容 - text()、html() 以及 val() , 设置属性 - attr()

    jQuery - 设置内容和属性  设置内容 - text().html() 以及 val() text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容(包括 HTM ...

  6. 转：css中overflow:hidden 不起作用了吗？

    css中overflow:hidden 不起作用了吗? 有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗?其实看似 ...

  7. VM搭建Hadoop环境静态IP未起作用

    原文 https://www.toutiao.com/i6481452558941438478/ 问题描述 1.环境工具 VMware_workstation_full_12.5.2 CentOS-7 ...

  8. ## GridView 布局：item设置的高度和宽度不起作用、自动适配列数、添加Header和Footer ##

    一.item设置的高度和宽度不起作用 转自:http://www.cnblogs.com/0616--ataozhijia/p/6031875.html [Android Pro] listView和 ...

  9. 不能设置sublime text 2 为默认编辑器

    今天遇到一个有趣的事情,当我设置 css 样式表的默认打开方式的时候,却始终无法设置成功,系统总是随机选取一种打开方式来打开文件.比如:pdf.DW.txt等方式. 我设置默认打开方式的步骤如下: 1 ...

随机推荐

  1. 小程序登录&授权&获取用户信息

    一 .登录 时序图如下: wx.login() 获取js_code 示例代码: App({   onLaunch: function() {     wx.login({       success: ...

  2. psutil模块

    python模块之psutil 一.psutil模块 1.介绍 psutil是一个跨平台库(http://pythonhosted.org/psutil/)能够轻松实现获取系统运行的进程和系统利用率( ...

  3. elasticSearch-header

    elasticSearch既有chrome的插件 sense,但是因为chrome作为恶意插件不让植入,因此sense目前还停留在5版本. elasticSearch自带head plugin,用于监 ...

  4. ABAP-串口通信-道闸设备

    最近SAP系统需要与道闸设备集成,通过串口通讯模式控制道闸栏杆升降,在此将开发过程中的思路及问题点做个备注. 一.相关设备 道闸设备型号:富士智能FJC-D618 串口模块:康耐德 C2000-A1- ...

  5. 修改页面中显示出需要修改的数据(包括select选择框复显示)

    页面中需要用到某个对象时,在底层代码中赋值,然后页面用java代码进行获取调用 如下截图: select复显示:根据后台方法赋值选择框 ,并设置初始值 按钮及选择框的禁用(五种方法): 方法一: $( ...

  6. linux 覆盖可执行文件的问题

    测试环境是3.10.0 内核. 有一次操作中,发现cp -f A B执行的时候,行为不一样: 当B没被打开,则正常覆盖B. 当B是被打开,但没有被执行,则能覆盖, 当B被打开,且被执行,则不能直接覆盖 ...

  7. Java 配置环境变量教程

    [声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...

  8. 遍历DOM树，理解更新范围

    在JavaScript中,如果需求对多个元素重复进行同样的操作,就需要写一个循环来遍历选中的所有元素. 在jQuery中,当选择器返回了多个元素时,可以使用一个方法来更新所有的元素,不再需要使用循环. ...

  9. (转)如何禁用Windows 10系统的触摸屏

    https://baijiahao.baidu.com/s?id=1593890738706748667 现在许多优质的Windows 10个人电脑都配备了触摸屏,因为触摸屏的日益普及,Windows ...

  10. 消息中间件MQ详解及四大MQ比较

    一.消息中间件相关知识 1.概述 消息队列已经逐渐成为企业IT系统内部通信的核心手段.它具有低耦合.可靠投递.广播.流量控制.最终一致性等一系列功能,成为异步RPC的主要手段之一.当今市面上有很多主流 ...