测试代码：

 <!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. template学习一函数模板

    要点: 1.模板参数在实体化的时候不能自动类型转换,只有非模板函数才可以 例如: int max(int,int); template <class T> T max(T,T); 在调用的 ...

  2. 搜索引擎 ElasticSearch 之 步步为营1 【环境搭建&初识ElasticSearch】

    1.下载ElasticSearch a.下载Java环境JDK:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloa ...

  3. pushState 和 replaceState

    使用此方法浏览器前进后退仍然可查看对应内容 设置值 history.pushState({}, "页面标题", "xxx.html"); history.rep ...

  4. 关于java8 interface的default方法

    转自鸟窝 博主写的挺详细,不了解的看一看啊 以前经常谈论的Java对比c++的一个优势是Java中没有多继承的问题. 因为Java中子类只能继承(extends)单个父类, 尽管可以实现(implem ...

  5. iOS进阶_地图定位

    一.定位步骤 1.Xcode自带地图,直接先引入头文件 #import <CoreLocation/CoreLocation.h> 2.CLLocation框架中的CLLocationMa ...

  6. VIM使用(二) 浏览内核源代码

    为了实现类似SourceInsight功能,通过VIM+Ctags+Cscope+Taglist+Source Explore +NERD Tree实现． 一, 安装插件 1)安装Ctags 和Csc ...

  7. android开发中监控android软件网络请求的软件Charles使用入门

    1.下载并安状软件,官网在此: http://www.charlesproxy.com/ 2.前题条件,电脑和手机必须在同一网段 3.在Charles界面选择菜单 proxy->proxy se ...

  8. Android--全局获取Context

    1.Android 提供了一个Application 类,每当应用程序启动的时候,系统就会自动将这个类进行初始化.这里我们可以定制一个自己的Application 类,以便于管理程序内一些全局的状态信 ...

  9. C#的winform编程入门简单介绍

    C#中事件.事件委托.事件的订阅 例子: using System.Timers; Timer t1 = new Timer(); t1.Tick += new EventHandler(XX); p ...

  10. CentOS7 bonding配置

    操作系统:CentOS Linux release 7.1.1503 (Core) 网卡适配器: eno1.eno2 bonding类型:mode=1 (active-backup),主-备份策略 网 ...