测试代码：

 <!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. Memcached服务介绍及安装指南

    一.memcached服务介绍 1.为什么需要memcached服务 A:第一种场景 网站访问大多数情况下都需要查询数据库操作,如果网站的流量很大并且大多数的访问会造成数据库高负荷的状况下,由于大部分 ...

  2. angular JS 做分页

    在网上找了一天,连一个像样点的分页DEMO都没找到,晕死了.大部分都是相互抄,有各种各样的问题,要不是代码有BUG,要不就是解释不明,GITHUB上下载下来的总是乱糟糟的.心累.

  3. [UCSD白板题] Compute the Edit Distance Between Two Strings

    Problem Introduction The edit distinct between two strings is the minimum number of insertions, dele ...

  4. windows编程：画线，简单的碰撞检测，简单的帧率锁定

    #define WIN32_LEAN_AND_MEAN #include <windows.h> #include <windowsx.h> #include <mmsy ...

  5. testng参数化及用例排序

    http://blog.sina.com.cn/s/blog_6966650401012ra0.html 一.一个简单的测试谷歌搜索 import org.testng.annotations.Tes ...

  6. Windows Server 2003搭建邮件服务器

    Windows Server 2003搭建邮件服务器 由于Windows Server 2003默认是没有安装我们搭建邮件服务器所需要的POP3和SMTP服务的,因此需要我们自己来安装.方法如下: 1 ...

  7. PHP程序员面临的成长瓶颈

    作为Web开发中应用最广泛的语言之一,PHP有着大量的粉丝,那么你是一名优秀的程序员吗?在进行自我修炼的同时,你是否想过面对各种各样的问题,我该如何突破自身的瓶颈,以便更好的发展呢? PHP工程师面临 ...

  8. PHP学习第一天笔记——php的基本语法

    1.php嵌入到html中的方式 (1) <?php.....?> 标准风格(推荐) (2)<script language="php">......< ...

  9. 【转】Eclipse打JAR包,插件FatJar安装与使用

    原文地址:http://blog.csdn.net/jikeyzhang/article/details/4731968 下载RUL: 下载fatJar插件,解压缩后是一个.../plugins/(n ...

  10. 使用knockout-sortable实现对自定义菜单的拖拽排序

    在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...