webkitlineclamp css3,-webkit-line-clamp 兼容性问题

1.一般情况下，想要实现文本超过几行后显示省略号的css。

color: #101010;

font-size: 14px;

text-align: justify;

font-family: SourceHanSansSC-regular

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3;

-webkit-box-orient: vertical;

2.但是有兼容性问题，就是在苹果手机时省略号会和内容重叠

3.解决的方法有几个，下面说2种，

3.1 方法简单，但如果内容有中英文的话，省略号显示的位置可能会不一样。

( (屏幕宽度-内容距离屏幕宽度两边的总和)/字体大小)*行数-预留给省略号的长度

window.contentMaxLength = (($(window).width() - 60) / 14) * 3 - 3;

然后获取获取内容的长度再判断一下是否大于计算好的长度进行截取

var conValue = resData.records[i].conValue;if (conValue && conValue.length > contentMaxLength) { resData.records[i].conValue = conValue.substr(0, contentMaxLength) + ' ...';}

3.2 使用jq提供的ellipsis.js(自动计算内容宽度截断，并加上省略号，内容不受中英文或符号限制)

demo+链接地址: https://github.com/thinhunan/jquery.ellipsis.js

3.3 借鉴修改后的ellipsis.js

(function($) { $.fn.ellipsis = function(options) {

// default option var defaults = { 'row' :3, // show rows 'onlyFullWords': false, // set to true to avoid cutting the text in the middle of a word 'char' : '...', // ellipsis 'callback': function() {}, 'position': 'tail' // middle, tail };

options = $.extend(defaults, options);

this.each(function() { // get element text var $this = $(this); var text = $this.text(); var origText = text; var origLength = origText.length; var origHeight = $this.height();

// get height $this.text('a'); var lineHeight = parseFloat($this.css("lineHeight"), 10); var rowHeight = $this.height(); var gapHeight = lineHeight > rowHeight ? (lineHeight - rowHeight) : 0; var targetHeight = gapHeight * (options.row - 1) + rowHeight * options.row;

if (origHeight <= targetHeight) { $this.text(text); options.callback.call(this); return; }

var start = 1, length = 0; var end = text.length;

if(options.position === 'tail') { while (start < end) { // Binary search for max length length = Math.ceil((start + end) / 2);

$this.text(text.slice(0, length) + options['char']);

if ($this.height() <= targetHeight) { start = length; } else { end = length - 1; } }

text = text.slice(0, start);

if (options.onlyFullWords) { text = text.replace(/[\u00AD\w\uac00-\ud7af]+$/, ''); // remove fragment of the last word together with possible soft-hyphen characters } text += options['char'];

}else if(options.position === 'middle') {

var sliceLength = 0; while (start < end) { // Binary search for max length length = Math.ceil((start + end) / 2); sliceLength = Math.max(origLength - length, 0);

$this.text( origText.slice(0, Math.floor((origLength - sliceLength) / 2)) + options['char'] + origText.slice(Math.floor((origLength + sliceLength) / 2), origLength) );

if ($this.height() <= targetHeight) { start = length; } else { end = length - 1; } }

sliceLength = Math.max(origLength - start, 0); var head = origText.slice(0, Math.floor((origLength - sliceLength) / 2)); var tail = origText.slice(Math.floor((origLength + sliceLength) / 2), origLength);

if (options.onlyFullWords) { // remove fragment of the last or first word together with possible soft-hyphen characters head = head.replace(/[\u00AD\w\uac00-\ud7af]+$/, ''); }

text = head + options['char'] + tail; }

$this.text(text);

options.callback.call(this); });

return this; };}) (jQuery);

页面调用：$(dom).ellipsis();

css自动省略号&period;&period;&period;，通过css实现单行、多行文本溢出显示省略号

网页开发过程中经常会遇到需要把多行文字溢出显示省略号,这篇文章将总结通过多种方法实现文本末尾省略号显示. 一.单行文本溢出显示省略号(…) 省略号在ie中可以使用text-overflow:ellip ...

Atitit&period;html css &&num;160&semi;浏览器原理理论概论导论attilax总结

Atitit.html css  浏览器原理理论概论导论attilax总结 1.1. 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)1 2. 5.1.1 DOM标准 1011 3.

Swiper之滑块1

之前介绍过Swiper,它是一个神奇的插件.类似于Android的触屏操作,Swiper应用于Web中也可以实现这样的效果,我们来看看(用鼠标可拖动). startSlide Integer (def ...

HTML5&sol;CSS3 第三章页面布局

页面布局 1 页面组成 2 布局相关的标签

 这是一个行内元素,没有任何意义 & ...

IE兼容性问题汇总【持续更新中】

问题:IE8/9不支持Array.indexOf 解决方案 if (!Array.prototype.indexOf) { Array.prototype.indexOf = function(elt ...

&lbrack;WebKit内核&rsqb; JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析

[WebKit内核] JavaScript引擎深度解析--基础篇(一)字节码生成及语法树的构建详情分析 标签: webkit内核JavaScriptCore 2015-03-26 23:26 2285 ...

微信浏览器是移动端的IE6&quest;微信升级内核后Html5和CSS3兼容性总结

今年4月,自从微信浏览器X5 升级Blink内核之后,各前端社区一片高潮,仿佛看到了前端er,眼含热泪进而抱头痛头的说:终于可以不用兼容这"移动端的IE6 "了,可以早点回家了!! ...

CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

解决webkit浏览器中js方法中使用window&period;event提示未定义的问题

这实际上是一个浏览器兼容性问题,根源百度中一大堆,简要说就是ie中event对象是全局变量,所以哪里都能使用到,但是webkit内核的浏览器中却不存在这个全局变量event,而是以一个隐式的局部变量的 ...

随机推荐

SharePoint Content Database简介

SharePoint作为微软主打的企业Portal平台,功能强大,使用简单,非常的方便.对于很多关系数据,我们可以使用自定义列表来维护,如果是非关系数据,可以使用文档库来维护.另外还可以在上面进行版本 ...

常见IE浏览器bug及其修复方案&lpar;双外边距、3像素偏移、绝对定位&rpar;

1. 双外边距浮动bug IE6和更低版本中存在双外边距浮动bug,顾名思义,这个Windows bug使任何浮动元素上的外边距加倍 bug重现: < ...

Eclipse 安装Groovy插件

摘自: http://blog.csdn.net/boonya/article/details/45399901 步骤一: 下载eclipse4.3.0,地址:http://www.eclipse.o ...

CodeForces 158DIce Sculptures(枚举)

一个暴力的枚举,枚举组成正多边形需要对应覆盖原先的几条边,范围为(1,n/3),然后维护最大值就可以了,注意初始化为-inf. #include #include< ...

Java栈与堆 (转)

1. 栈(stack)与堆(heap)都是Java用来在Ram中存放数据的地方.与C++不同,Java自动管理栈和堆,程序员不能直接地设置栈或堆. 2. 栈的优势是,存取速度比堆要快,仅次于直接位于C ...

【BZOJ2127】happiness

Time Limit: 1000 ms   Memory Limit: 256 MB Description 高一一班的座位表是个n*m的矩阵,经过一个学期的相处,每个同学和前后左右相邻的同学互相成为 ...

Nginx系列1：ubuntu16&period;04编译出适合自己的nginx服务器

1.下载nginx nginx官网:nginx.org tar.gz文件 解压缩命令: wget https://nginx.org/download/nginx-1.14.2.tar.gz #下载n ...

python的类和对象(类的静态字段)

转自:http://www.cnblogs.com/Eva-J/p/5044411.html 什么是静态字段 在开始之前,先上图,解释一下什么是类的静态字段(我有的时候会叫它类的静态变量,总之说的都是 ...

Fuck me 忘记改REDO 造成复制用户超级慢

. 一个用户的测试环境, 想着复制用户进行功能和单点性能测试. 但是用户数据量较大,见图 2. 发现在测试环境里面复制一个用户 大概耗时2小时20min的时间, 测试虚拟机的配置: 最开始注意到awr ...

Alpha发布用户使用报告【欢迎来怼】

目录 用户统计表 部分用户评论截图 用户统计图 总结 一.用户统计表 目前,博客园安卓版的用户已达到11位.为了采集到更加客观公正的用户评价,并没有将团队内部人员的评价统计进来.同时,为了更好地保护用 ...