测试代码：

 <!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. X86上搭建交叉工具链，来给龙芯笔记本编译本地工具链（未完待续）

    故事的背景是,我买了一台龙芯2F的笔记本来装B. 为什么说是装B呢?因为不但操作系统是Linux,而且CPU还是龙芯的. 一般人有这么酷的装备吗?简直是装B大圣啊. 这里一定要申明一点,本人不是IT技 ...

  2. Oracle学习笔记2

    主键 create table userinfo_test( userid number(3,0), username varchar2(20), pwd varchar2(20), constrai ...

  3. location

    //*******************location对象************************************************************ /*立即打开UR ...

  4. Windows Phone 8.1 新特性 - 常用的启动器

    本篇为大家介绍一下 Windows Phone 8.1 中部分常用启动器的实现方式.分别是 呼叫电话.发送短信.发送邮件.添加约会到日历.启动地图.地图路线显示.地图下载 和 地图更新. 1. 呼叫电 ...

  5. Android中处理OnClick和OnTouch方法冲突的解决方案

    目前想到的最好的解决方法,大家有更好的欢迎告知. 问题:在一个view中有一个按钮,要求可以通过点按移动这个按钮,同时单纯的点击而不移动这个按钮的话可以跳转到新的Activity. 遇到的困难:按钮的 ...

  6. [UE4][Custom Animation Graph Node]Evaluate Pose by Curve

    目的:根据曲线值获得当前动作帧.用于实现各种通过曲线同步的功能. 方法:继承FAnimNode_Base创建自定义动画节点.重写Evaluate部分.创建相应的AnimGraphNode.可参考前一篇 ...

  7. PHP内核探索：数组与链表

    在C语言中,我们可以自定义各种各样的数据结构,用来把很多数据保存在一个变量里面,但是每种数据结构都有自己的优缺点,PHP内核规模如此庞大,是否已经找到了一些非常棒的解决方法呢? 我们在选择各种数据结构 ...

  8. HTML URL 编码

    转自:http://www.w3school.com.cn/tags/html_ref_urlencode.htmlURL 编码 - 从 %00 到 %8f ASCII Value URL-encod ...

  9. OpenMP之求和（用section分块完成）

    // Sum_section.cpp : 定义控制台应用程序的入口点. //section功能:; //1.指定其内部的代码划分给线程中某个线程,不同的section由不同的线程执行; //2.将一个 ...

  10. [转]mysql drop、truncate和delete比较

    一.drop table tb drop将表格直接删除,没有办法找回. 立刻释放磁盘空间 ,不管是 Innodb和MyISAM . 二.truncate (table) tb 该命令可以清空一个表里的 ...