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

<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. 社区发现(Community Detection)算法（转）

    作者: peghoty 出处: http://blog.csdn.net/peghoty/article/details/9286905 社区发现(Community Detection)算法用来发现 ...

  2. 680. Valid Palindrome II

    static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...

  3. 非关系型数据库MongoDB

    爆炸式发展的NoSQL技术 在过去的很长一段时间中,关系型数据库(Relational Database Management System)一直是最主流的数据库解决方案,他运用真实世界中事物与关系来 ...

  4. 学习fortran77基础语法

    Program ParamaterDefine Implicit None C FORTRAN变量名和关键字不区分大小写.但调用外部函数的话,需要在编译选项里指定 c 大小写等选项 因为链接器是区分大 ...

  5. Curry化函数

    <script> function fn(){ var i, rult = 0, len = arguments.length; for (i=0;i<len ;i++ ) { ru ...

  6. Tensflow预测股票实例

    import pandas as pd import numpy as np import matplotlib.pyplot as plt import tensorflow as tf #———— ...

  7. 绑定弹窗事件最好的方法，原生JS和JQuery方法

    使用jQuery ui = { $close: $('.close') , $pop: $('.pop') , $topopBtn: $('.topop-btn') , $popbtnArea: $( ...

  8. 20169207《Linux内核原理及分析》第十三周作业

    第一周作业::对Linux的基本知识进行了了解,并对基本操作进行熟悉和应用. 第二周作业::了解了冯诺依曼体系结构.各种寄存器的功能和汇编指令的作用和功能. 第三周作业::这周主要了解了Linux系统 ...

  9. （DP 雷格码）Gray code -- hdu -- 5375

    http://acm.hdu.edu.cn/showproblem.php?pid=5375 Gray code Time Limit: 2000/1000 MS (Java/Others)    M ...

  10. noip第5课资料