测试代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

         <meta name="apple-mobile-web-app-capable" content="yes">

         <meta name="apple-mobile-web-app-status-bar-style" content="black">

         <meta content="telephone=no" name="format-detection">

         <meta content="on" http-equiv="x-dns-prefetch-control">

         <title>测试css3实现超出文本指定行数(指定文本长度)用省略号代替的效果</title>

         <style>

             .unilineText {  /*设置文本为单行，如果超出长度用省略号代替*/

                 width: 300px;

                 overflow: hidden;

                 text-overflow: ellipsis;

                 -o-text-overflow: ellipsis;

                 -webkit-text-overflow: ellipsis;

                 -moz-text-overflow: ellipsis;

                 white-space: nowrap;  /*规定段落中的文本不进行换行*/

             }

             .multiLineText {  /*设置文本为多行，如果超出长度用省略号代替*/

                 width: 200px;

                 word-break: break-all;

                 display: -webkit-box;

                 -webkit-line-clamp: 3;  /*限制在一个块元素显示的文本的行数*/

                 -webkit-box-orient: vertical;

                 overflow: hidden;

             }

         </style>

     </head>

     <body>

         <h1>测试显示一行文本：</h1>

         <div class="unilineText">

             text-overflow: ellipsis可以用来多行文本的情况下，用省略号隐藏超出范围的文本 ；white-space: nowrap规定段落中的文本不进行换行; -webkit-box-orient：vertical限制在一个块元素显示的文本的行数

         </div>

         <h1>测试两行或者两行以上的文本:</h1>

         <div class="multiLineText">

             text-overflow: ellipsis可以用来多行文本的情况下，用省略号隐藏超出范围的文本 ；white-space: nowrap规定段落中的文本不进行换行; -webkit-box-orient：vertical限制在一个块元素显示的文本的行数

         </div>

     </body>

 </html>

这个测试代码中，多行文本用省略号代码只兼容webkit内核的浏览器，其它内核解决办法暂时没有找到，如果哪位大神知道请告知我，多谢！

css3实现超出文本指定行数(指定文本长度)用省略号代替的更多相关文章

  1. CSS文本超出指定行数省略显示

    单行: overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 2行: font-size: 17px;overflow: hi ...

  2. .Net_用控制台程序打印指定行数的三角型（面试题）

    .Net_用控制台程序打印指定行数的三角型(面试题)   下面是一个由*号组成的4行倒三角形图案.要求: 1.输入倒三角形的行数,行数的取值3-21之间,对于非法的行数,要求抛出提示“非法行数!”: ...

  3. Linux查看文件指定行数内容

    1.tail date.log               输出文件末尾的内容,默认10行 tail -20  date.log        输出最后20行的内容 tail -n -20  date ...

  4. linux提取指定行至指定位置

    grep查找ERROR,定位位置 awk打印到指定行数 sed打印到文本末尾 awk打印到文本末尾 方法一 #!/bin/csh -f if(-f errorlog.rpt) then rm -rf ...

  5. oracle:ORACLE 实际返回的行数超出请求的行数

    写的存储过程,执行后一直报实际返回的行数超出请求的行数的错误. 原因:select prdt_id into prdt_id from.... 两个变量名称相同造成的..哎  第一个变量换成大写..问 ...

  6. 算法积累：解决如何获取指定文件夹路径或者文件路径下所有子文件后缀为.h .m .c的文本的行数

    1.先解决如何获取一个文件的代码行数 一开始对于这个问题,我的思路就回荡在:1字符串子字符串的判断 2循环直到结束的想法 3将原来是"\n"替换掉之类的想法 一个问题总会有多种解决 ...

  7. css文字超出指定行数显示省略号

    display: -webkit-box; overflow: hidden; word-break: break-all; /* break-all(允许在单词内换行.) */ text-overf ...

  8. (转)Java按指定行数读取文件

    package test import java.io.File; import java.io.FileReader; import java.io.IOException; import java ...

  9. vim定位到指定行数

    显示行号:命令模式下set nu 定位到指定行: 命令模式下,:n   比如想到第2行,:2 编辑模式下,ngg  比如想到第5行 5gg(或者5G) 打开文件定位到指定行   vim  +n  te ...

随机推荐

  1. 算法入门笔记------------Day2

    1.开灯问题 有n盏灯,编号为1-n,第一个人把所有灯打开,第二个按下所有编号为2的倍数的开关(这些灯都被关掉),第三个人按下所有编号为3的倍数的开关,依次类推,一共有k个人,问最后有哪些灯开着?输入 ...

  2. IE8控件安装方法

    打开上传页面,IE提示安装控件,点击安装     刷新网页,点击允许运行加载项,需要允许两次  

  3. 微信小程序免费SSL证书https、TLS版本问题的解决方案

    微信小程序与第三方服务器通讯的域名5个必要条件1.一个已备案的域名,不是localhost.也不是127.0.0.1,域名不能加端口2.加ssl证书,也就是https://~~~4.HTTPS 服务器 ...

  4. EOS -- 一种灵巧的系统运行跟踪模块

    EOS到底是什么词的缩写,我猜应该是Error of System.最早接触它,是在UT那会.不过那会它是被设计成一个很大的数组,也没有被包含调用函数和行号,又或是时间,只是些计数.编码时,加减一个E ...

  5. mentohust 你让我如何说你是好呢？

    最近换了ubuntu系统结果热了不少的麻烦,  借此机会唠叨一下, 首先是你这个ubuntu16.4 你这个bug 太让人郁闷了吧,或许主要是应该怪我菜,装个看家的软件eclipse.还热除了一堆的麻 ...

  6. addScalar 显式指定返回数据的类型

    sql: select a.id as 受理 from a SQLQuery sqlQuery=this.getSession().createSQLQuery(sb.toString()).addS ...

  7. [Java基础]java中this和super

    一.this关键字 1.this概念 (参考:http://www.cnblogs.com/xdp-gacl/p/3636071.html)   this是一个引用,它指向自身的这个对象,它的内存分析 ...

  8. getIdentifier()获取资源Id

    工作需要使用getIdentifier()方法可以方便的获各应用包下的指定资源ID.主要有两种方法:(1)方式一Resources resources = context.getResources() ...

  9. 套题 codeforces 361

    A题((Mike and Cellphone) 看起来好像需要模拟数字键位的运动,可是,只要判断出那些必然YES的数字组合不就好了么 #include <cstdio> #include ...

  10. 原创 Datareader 导出为csv文件方法

    DataReader 是游标只读数据, 如果是大数据导出,用Datatable 将耗费巨大内存资源.因为Datatable 其实就是内存中的一个数据表 代码如下 /// <summary> ...