测试代码：

 <!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. javaWeb开发小工具--MyCommonUtils

    MyCommonUtils 参考一些资料,写了这个工具类.在这个工具类中,主要实现了2个方法: 1.生成随机的序列号 uuid(): 2.将Map中的数据封装到javaBean对象中toBean(Ma ...

  2. xml文件格式说明

    转载自:http://www.cr173.com/html/10715_1.html 关于xml的有关操作,在读的过程中,由于是初学者有不明白的地方就查资料,发现自己多innerXml,outerXm ...

  3. I2C VHDL程序

    http://blog.sina.com.cn/s/blog_9bd80b7601012o9y.html library ieee ; use ieee.std_logic_1164.all ; us ...

  4. Framework manager编写SQL错误整理

    BMT-MD-0059 这个报错是由于导入了表全部的列,而之引用了部分列,所以未被引用的列将要被删除 XQE-PLN-0248 在模型中找不到“MONTHLY_FORECAST_FACT”的列“mon ...

  5. Win7下硬盘安装Linux双系统

    Win7下硬盘安装CentOS6.2 一.准备工作:划出磁盘空闲空间和准备安装文件  参考文献: [Win7下硬盘安装Linux总结(CentOS)]来源:Linux社区  作者:lixianlin ...

  6. Python操控mysql数据库

    导入库——MySQLdb 1.链接MySQL conn=MySQL.connect(host=',port=3306) 此处主机用ip地址,不能使用'localhost',不然会显示链接错误. 2.选 ...

  7. MemCached 安装笔记

    安装步骤: 1. 下载libevent & memcached 源码包 分别把memcached和libevent下载回来,放到 /tmp 目录下: # cd /tmp     # wget ...

  8. c++中的指针之指针在数组

    使用一维指针数组输出一维数组中的数 int array[]={1,2,3,4,5,6};        int *p; p=array;        for(int i=0;i<6;i++){ ...

  9. 最新Ubuntu10.10 更新源

    Ubuntu10.10这个版本真的很老了,官方N多年前早已不再支持更新软件源了. 目前可用的有中科大镜像更新源. 中科大Ubuntu 10.10源列表: deb http://mirrors.ustc ...

  10. 看到shape文件可以加载到GOOGLE EARTH上的方法，有空可以试试

    引用 Shape文件转为KMZ并在Google Earth中显示 (1)在ArcGIS中加载一个Shape文件,笔者加载的是某个地区的道路(双线道路)图层 (2)在ArcToolbox中,依次展开Co ...