最近接到一个需求，要求商场导航里的文字最多显示两行，超出两行的省略号显示，查一些资料，又根据自己的需求，改了很多，直接上代码吧

<html>

    <head>

        <style type="text/css">

            .main{

                width: 360px;

                border: 1px solid #ccc;

                overflow: hidden;

            }

            .child{

                float: left;

                height: 40px;

                overflow: hidden;

                padding: 10px;

                background-color:blanchedalmond;

                margin: 10px;

            }

            .itemWrap{

                display:table-cell;

                vertical-align: middle;

                text-align: center;

                height: 40px;

            }

            .item{

                font-size: 12px;

                font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

                overflow:hidden;

                width: 80px;

                text-overflow:ellipsis;

                display: -webkit-box;

                -webkit-box-orient: vertical;

                -webkit-box-pack: center;

                -webkit-box-align: center;

                -webkit-line-clamp:2;

                overflow: hidden;

            }

        </style>

    </head>

    <body>

        <div class="main">

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据

                    </div>

                </div>

            </div>

            <div class="child">

                <div class="itemWrap">

                    <div class="item">

                        测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据

                    </div>

                </div>

            </div>

        </div>

    </body>

</html>

效果图如下：

child主要是控制padding和背景颜色，浮动，itemwrap主要是为了垂直居中，item是真正的省略号实现；

注：在less里引入时，一定要记得不要编译-webkit开头的东西，加上less注释就好了

/*! autoprefixer: off */

-webkit-box-orient: vertical;

/*! autoprefixer: on */

h5文字超出，两行显示，超出显示省略号的更多相关文章

  1. CSS div内文字显示两行，超出部分省略号显示

    1. 概述 1.1 说明 在项目过程中,有时候需要控制div内文字最多显示两行,超出的使用省略号进行处理.使用识别码/前缀-webkit进行处理可直接得到相应效果. 1.1 -webkit WebKi ...

  2. JS控制文字只显示两行，超出部分显示省略号

    由于使用css控制文字只显示多行,超出部分显示省略号,存在一定的兼容性问题,所以总结了一下网上一些大咖使用js实现控制行数的解决方案. 第一步:依次引入jquery.js+jquery.ellipsi ...

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

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

  4. css：在容器内文字超过容器范围，显示一行加省略号或者两行加省略号

    一.显示一行加省略号:各浏览器兼容 .box{ width: 100px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; } ...

  5. 关于H5 移动端css 文本超出时省略号 失效的问题

    之前写代码的时候遇到一个问题,就是用了下面这段css代码来让文字超出范围隐藏并显示省略号. overflow: hidden; text-overflow: ellipsis; display: -w ...

  6. android textview 显示一行，且超出自动截断，显示"..."

    android textview 显示一行,且超出自动截断,显示"..." <TextView android:layout_width="wrap_content ...

  7. css控制字符长度超出变成点点点显示（单行，多行）

    css控制字符长度超出变成点点点显示 单行: width 必不可少 div{ width: 55%; text-overflow: ellipsis; overflow: hidden; white- ...

  8. CSS控制文本超出指定宽度后用省略号代替，CSS控制文本不换行

    CSS控制文本超出指定宽度后用省略号代替,CSS控制文本不换行. 一般的文字截断(适用于内联与块): .text-overflow {     display:block;/*内联对象需加*/     ...

  9. WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip

    原文:WPF 文字换行TextWrapping 显示不全用省略号TextTrimming 显示不全弹提示内容ToolTip [TextBlock] 换行    TextWrapping="W ...

随机推荐

  1. 2018.11.01 NOIP训练 木棒分组（搜索+剪枝）

    传送门 测试搜索的时候状态定义错了233. 我们把木棒从大到小排序. 然后保证每一组搜到的木棒出现的长度是从大到小递减的. 直接定义现在搜的木棒从什么位置开始,当前这一组的总长度,之前几组的总长度. ...

  2. 【服务器】Nginx文件配置

    nginx.conf文件 #运行用户 user nobody; #启动进程,通常设置成和cpu的数量相等 worker_processes 1; #全局错误日志及PID文件 #error_log lo ...

  3. IntelliJ IDEA 2017版 spring-boot2.0.4的yml配置使用

    一.必须配置字端两个 server: port: 8080 servlet: context-path: /demo 二.两种mvc转换springboot,一种是注解,一种就是.yml或proper ...

  4. 【转】Javascript基本类型和引用类型的区别

    根据[转贴]进一步补充 今天明白了一个困扰很久的问题:引用类型和基本类型的区别与联系要明白这个问题,首先需要理解堆栈的概念.那什么又是堆栈,有什么区别和联系呢?堆:首先堆是动态分配的,JVM并不会自动 ...

  5. issubclass ,isinstance,反射

    issubclass() 函数 issubclass() 方法用于判断参数 class 是否是类型参数 classinfo 的子类. 语法 以下是 issubclass() 方法的语法: issubc ...

  6. Greys--JVM异常诊断工具

    https://github.com/oldmanpushcart/greys-anatomy/wiki/greys-pdf 一.简介 我们平时在线上或者开发中会遇到各种性能.功能等问题,在运行过程中 ...

  7. Java学习介绍

    Java版本介绍 JavaME:微型版,用于开发小型设备.智能卡.移动终端应用(使用率较低) JavaSE:标准版,用于创建桌面应用(企业用JavaSE创建桌面应用较少) JavaEE:企业版,用于创 ...

  8. 02：OC和C对比

    1.源文件对比 C语言中常见源文件.h头文件,.c文件 文件扩展名 源类型 .h 头文件,用于存放函数声明 .c C语言源文件,用于实现头文件中声明的方法 OC中的源文件.h头文件,.m与.mm的实现 ...

  9. hdu 5071 vector操作恶心模拟

    http://acm.hdu.edu.cn/showproblem.php?pid=5071 对于每一个窗口,有两个属性:优先级+说过的单词数,支持8个操作:新建窗口,关闭窗口并输出信息,聊天(置顶窗 ...

  10. Scala_关键字

    关键字 Lazy Scala中用lazy定义的变量叫惰性变量,会实现延迟加载:惰性变量只能是不可变变量,而且只有在调用惰性变量时,才会去实列化这个变量 object ScalaLazyDemo1{   ...