布局常见问题之css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。
大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
但是这个属性并不支持多行文本溢出显示省略号，这里根据应用场景介绍几个方法来实现这样的效果。
WebKit浏览器或移动端的页面
在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
-webkit-line-clamp用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。
常见结合属性：
display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
text-overflow: ellipsis;，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。
overflow : hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
这个属性比较合适WebKit浏览器或移动端（绝大部分是WebKit内核的）浏览器。
垮浏览器兼容的方案
比较靠谱简单的做法就是设置相对定位的容器高度，用包含省略号(…)的元素模拟实现；
例如：
p {
position:relative;
line-height:1.4em;
/* 3 times the line-height to show 3 lines */
height:4.2em;
overflow:hidden;
}
p::after {
content:"...";
font-weight:bold;
position:absolute;
bottom:0;
right:0;
padding:0 20px 1px 45px;
background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
}
看demo：
这里注意几点：
height高度真好是line-height的3倍；
结束的省略好用了半透明的png做了减淡的效果，或者设置背景颜色；
IE6-7不显示content内容，所以要兼容IE6-7可以是在内容中加入一个标签，比如用<span class="line-clamp">...</span>去模拟；
要支持IE8，需要将::after替换成:after；
JavaScript 方案
用js也可以根据上面的思路去模拟，实现也很简单，推荐几个做类似工作的成熟小工具：
1.Clamp.js
下载及文档地址：https://github.com/josephschmitt/Clamp.js
使用也非常简单：
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});
2.jQuery插件-jQuery.dotdotdot
这个使用起来也很方便：
$(document).ready(function() {
$("#wrapper").dotdotdot({
// configuration goes here
});
});
-----------------------
jq控制文字数量---多行文本字符截取-仿溢出为省略号
1.单行 （知识点：substr(0,12)，截取从a到b的字符串长度的内容）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv = "X-UA-Compatible" content ="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit"/>
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
.txtList .icon{ display:inline-block;height:20px; cursor:pointer;}
</style>
</head> <body> <div class="txtList">
<ul>
<li><span class="text" title='文本文本本1'>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本1</span></li>
<li><span class="text" title='文本文本文文本2'>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本2</span></li>
<li><span class="text" title='文本文本文本3'>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本3</span></li>
</ul>
</div> <script type="text/javascript">
$( function(){ var $name_text=$(".txtList li .text");
var substr_text=$name_text.text();
if(substr_text.length>12){
$name_text.text(substr_text.substr(0,12)+"...");
} }) </script>
</body>
</html>
2.多行 （主要是宽度和行高。）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv = "X-UA-Compatible" content ="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit"/>
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style>
*{ margin:0; padding:0;}
ul,li{ list-style:none;}
.txtList{ width:100px;}
.txtList .icon{ display:inline-block; width:20px; height:20px; background:url(images/icon1.png) no-repeat; cursor:pointer;}
.txtList .icon.curr{background:url(images/icon2.png) no-repeat;}
</style>
</head> <body> <div class="txtList">
<ul>
<li><i class="icon"></i><span txt='文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本1'>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本1</span></li>
<li><i class="icon"></i><span txt='文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本2'>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本2</span></li>
<li><i class="icon"></i><span txt='文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本3'>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本3</span></li>
</ul>
</div> <script type="text/javascript">
$( function(){ $(".txtList .icon").click( function(){
var _text=$(this).next("span").text();
if(_text.length>12){
$(this).next("span").text(_text.substr(0,12)+"...");
}
}); }) </script>
</body>
</html>
布局常见问题之css实现多行文本溢出显示省略号(…)全攻略的更多相关文章
- css实现多行文本溢出显示省略号(…)全攻略
省略号在ie中可以使用text-overflow:ellipsis了,但有很多的浏览器都需要固定宽度了,同时ff这些浏览器并不支持text-overflow:ellipsis设置了,下文来给各位整理一 ...
- CSS 单行 多行文本溢出显示省略号
单行文本 overflow: hidden; text-overflow:ellipsis; white-space: nowrap; 多行文本溢出显示省略号: <style type=&quo ...
- css实现多行文本溢出显示省略号(…)
WebKit浏览器或移动端的页面在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit- ...
- CSS实现单行、多行文本溢出显示省略号（…）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS和JS实现单行、多行文本溢出显示省略号（该js方法有问题不对）
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; te ...
- CSS单行、多行文本溢出显示省略号（……）
这个问题经常遇到 1.单行文本溢出显示省略号(…) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 overflow:hidden;text-overflo ...
- CSS单行、多行文本溢出显示省略号
如果实现单行文本的溢出显示省略号小伙伴们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览. 实现方法: overflow: hidden; t ...
- CSS单行、多行文本溢出显示省略号（……）解决方案
单行文本溢出显示省略号(-) text-overflow:ellipsis-----部分浏览器还需要加宽度width属性 .ellipsis{ overflow: hidden; text-overf ...
- css多行文本溢出显示省略号(…)
text-overflow:ellipsis属性可以实现单行文本的溢出显示省略号(…).但部分浏览器还需要加宽度width属性. css代码: overflow: hidden; text-overf ...
随机推荐
- Sipdroid实现SIP(四): 传输层和应用层之间的枢纽SipProvider
目录 一. 概述 二. 主要变量 三. 主要方法 四. 在Sipdroid中的应用 一. 概述 在整套Sipdroid源码中, 类SipProvider是最靠近TCP/UDP的一层, 在Sipdroi ...
- 微信小程序前置课程：Flex 布局教程（一）：语法篇
原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 网页布局(layout)是CSS的一个重点 ...
- arm指令集
http://blog.chinaunix.net/uid-20769502-id-112445.html
- zabbix 安装配置以及漏洞检测脚本
最近zabbix爆出sql注入漏洞.之前一直没装过.就想着来安装一次.我在centos配置玩玩,记录一下:1.安装LAMP yum -y install httpd mysql mysql-ser ...
- iOS 发布项目到CocoaPods其实没那么复杂😆
首先大家必须要了解一下CocoaPods (如果你连CocoaPods是啥都不知道可以不用往下看了
- cuda编程（一）
环境安装和例程运行 显卡主要有两家,ATI.NVIDIA,简称A卡和N卡.随着GPU计算能力的上升,采用GPU并行计算来加速的应用越来越多. Nvidia创立人之一,黄仁勋(Jen-Hsun Huan ...
- CentOS 7上的性能监控工具
Linux中基于命令行的性能监控工具:dstat.top.netstat.vmstat.htop.ss.glances 1.dstat – 多类型资源统计工具(需配置epel源) 该命令整合了vmst ...
- android studio 程序错误
一.错误类型: com.android.tools.fd.runtime.BootstrapApplication cannot be cast to 成功修改方式 File --> Setti ...
- js onblur 和 onkeyup 事件用法
1. onblur 表示失去焦点时触发 2. onkeyup 表示键盘每输完一个字符之后触发,就是键盘上的按键被放开时. 例子如下: <!DOCTYPE HTML PUBLIC "-/ ...
- 能量项链AC了
我打算写出一个尽量看起来像是人话的解题报告. 然而这道题我还是[虽然AC但不会做] OYZ