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

<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. Codeforces gym 102062 简要题解

    文章目录 A. Bob and BoB B. Vibranium Gift C. The Blood Moon D. Palindrome and Chocolate E. Jumpy Robot F ...

  2. 2018.10.30 NOIP模拟 排列树（树形dp+组合数学）

    传送门 考试的时候乱搞过了. 其实题目就是让你求拓扑排序方案数. 直接树形dpdpdp然后组合数转移一下就行了. 乱搞代码

  3. 2018.10.29 bzoj4564: [Haoi2016]地图（仙人掌+莫队）

    传送门 根据原图建一棵新的树. 把原图每一个环上除了深度最浅的点以外的点全部向深度最浅的点连边. 然后可以搞出来一个dfsdfsdfs. 这个时候我们就成功把问题转换成了对子树的询问. 然后就可以对权 ...

  4. 2018.10.24 bzoj3195: [Jxoi2012]奇怪的道路（状压dp）

    传送门 f[i][j][k]f[i][j][k]f[i][j][k]表示前iii个点连了jjj条边,第i−K+1i-K+1i−K+1~iii个点连边数的奇偶性为kkk时的方案数. 转移规定只能从后向前 ...

  5. hdu-4300（字符串hash）

    题目链接:传送门 参考文章:传送门 思路: (1)对字符串进行翻译,求出s1(未翻译),s2(已翻译)字符串,并分别对s1,s2进行hash操作. (2)比较s1的后x位和s2的前x位的hash值,求 ...

  6. cacti＋CentOS6.5

    系统版本:CentOS6.5 软件版本:cacti-0.88f 需要预安装的软件有以下几种,可以通过yum安装全部 yum -y install net-snmp* yum -y install op ...

  7. vue的cli中自定义router

    1.安装router npm install vue-router 2.为了方便管理在components同级创建router文件夹 3.在文件夹中创建index.js文件,就是router文件 im ...

  8. mac环境下配置nginx

      1.建议使用homebrew安装(ruby安装 brew install ruby)   ruby -e "$(curl -fsSL https://raw.githubusercont ...

  9. thinkphp3.2 链接数据库测试

    配置数据库: 在Application/Home/config.php文件中设置: <?php return array( 'DB_TYPE' => 'mysql', // 数据库类型 ' ...

  10. ASP.NET 压缩输出的HTML字符

    重写Render using System; using System.Collections.Generic; using System.Text; using System.Web.UI; usi ...