javascript超过容器后显示省略号效果
在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(…)显示,这样,按照习惯,人们都会知道这儿有文字被省略了。css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写:
{width:27em; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow:hidden;}仅在Firefox火狐浏览器下无法实现文字溢出省略号表示,其文字直接从中间咔掉了,我这边不讲用css怎么样来实现这样的,具体的css实现可以自己百度去,我这边最主要的是讲怎么样用JS来实现,怎么样通过JS写一个简单的组件,我直接调用JS的初始化方法就可以实现掉!比如如下效果:
后面的点点点 来提示用户有更多的内容未显示完成这样的效果!
先废话少说!首先来看看我做的demo效果,就能明白到底是个什么样的效果!
想看效果,请点击我!ok?
一: 先来看看组件的配置项:如下:
targetCls
null, 目标要截取的容器 必填项 默认为null
limitLineNumber 1, 要显示的行数 默认为1行
type '...', 超过了容器长度 显示的type 默认为省略号
lineHeight 18, dom节点的行高 默认行高为18
isShowTitle true , title 是否需要title来显示所有的内容 默认为true
isCharLimit false 根据字符的长度来限制 超过显示省略号
maxLength 20 默认长度为20 超过字符20后 显示省略号
二:分析
1. 首先来讲讲此组件:支持2种方式来截取字符串,第一:根据字符的长度来截取,超过后显示省略号,比如我这样调用:
new MultiEllipsis({
"targetCls" : '.text8',
"isCharLimit":true,
"maxLength": 18
});
这样初始化的意思是说,isCharLimit为true是指用字符的个数来截取,最大的长度maxLength为18,这样初始化,因为代码里面会首先判断如果isCharLimit为true的话,就直接按照字符的个数来截取,比如如下代码:
2. 第二种是根据多少行数及高度来截取的,比如默认配置项的行高是18,如果我想显示2行,那也就是说高度h = 18*2, 假如容器的高度是100,那么截取的方法是:
使用 (100 - type的长度 - 1) 是否大于 18×2,如果大于的话,继续截取,否则的不截取,且显示省略号效果!如下代码:
缺点:但是使用行高截取的话,如果数据比较少的话,是可以的,但是如果数据很多的话,比如高度为500像素或者更多的话,那么相对来说会影响性能的,因为他们每次都要计算n次(n为循环调用函数多的意思)。
JS所有的代码如下:
复制代码
/* * 基于JS的MultiEllipsis * @author tugenhua */ function MultiEllipsis(options) { var self = this; self.options = $.extend({},defaults,options || {}); self._init(); } $.extend(MultiEllipsis.prototype,{ // 页面初始化 _init: function(){ var self = this, cfg = self.options; if(cfg.targetCls == null || $(cfg.targetCls + "")[0] === undefined) { if(window.console) { console.log("targetCls不为空!"); } return; } if(cfg.isShowTitle) { // 获取元素的文本 添加title属性 var title = self.getText(); $(cfg.targetCls ).attr({"title":title}); } // 如果是按照字符来限制的话 那么就不按照高度来比较 直接返回 if(cfg.isCharLimit) { self._charCompare(); return; } self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); }, /* * 按照字符的长度来比较 来显示文本 * @method _charCompare {private} * @return 返回新的字符串到容器里面 */ _charCompare: function(){ var self = this, cfg = self.options; var text = self.getText(); if(text.length > cfg.maxLength) { var curText = text.substring(0,cfg.maxLength); $($(cfg.targetCls + "")[0]).html(curText + cfg.type); } }, /* * 获取目标元素的text * 如果有属性 data-text 有值的话 那么先获取这个值 否则的话 直接去html内容 * @method getText {public} */ getText: function(){ var self = this, cfg = self.options; return $.trim($($(cfg.targetCls + "")[0]).html()); }, /* * 设置dom元素文本 * @method setText {public} */ setText: function(text){ var self = this, cfg = self.options; $($(cfg.targetCls + "")[0]).html(text); }, /* * 通过配置项的 行数 * 一行的行高 是否大于或者等于当前的高度 * @method _compareHeight {private} */ _compareHeight: function(maxLineHeight) { var self = this; var curHeight = self._getTargetHeight(); if(curHeight > maxLineHeight) { self._deleteText(self.getText()); } }, /* * 截取文本 * @method _deleteText {private} * @return 返回被截取的文本 */ _deleteText: function(text){ var self = this, cfg = self.options, typeLen = cfg.type.length; var curText = text.substring(0,text.length - typeLen - 1); curText += cfg.type; // 设置元素的文本 self.setText(curText); // 继续调用函数进行比较 self._compareHeight(cfg.lineHeight * cfg.limitLineNumber); }, /* * 返回当前dom的高度 */ _getTargetHeight: function(){ var self = this, cfg = self.options; return $($(cfg.targetCls + "")[0]).height(); } }); var defaults = { 'targetCls' : null, // 目标要截取的容器 'limitLineNumber' : 1, // 限制的行数 通过 行数 * 一行的行高 >= 容器的高度 'type' : '...', // 超过了长度 显示的type 默认为省略号 'lineHeight' : 18, // dom节点的行高 'isShowTitle' : true, // title是否显示所有的内容 默认为true 'isCharLimit' : false, // 根据字符的长度来限制 超过显示省略号 'maxLength' : 20 // 默认为20 };
以上这篇javascript超过容器后显示省略号效果的方法(兼容一行或者多行)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
本文向大家介绍js行号显示的文本框实现效果(兼容多种浏览器 ),包括了js行号显示的文本框实现效果(兼容多种浏览器 )的使用技巧和注意事项,需要的朋友参考一下 利用js打造的一个非常实用简易的文本编辑框,可以显示行号并且同时兼容ie和firefox等主流浏览器,如下效果图: 以下是该效果的源码: 以上就是javascript如何实现行号显示的文本框效果的源代码,希望对大家的学习有所帮助。
问题内容: 自从Firefox Nightly(35.0a1)的最新(?)版本以来,我一直在使用的flexbox容器内部遇到问题,每个列的宽度为50%。 演示: 在“每晚”中,文本将泄漏到其容器外部,并且不会在末尾附加。在Chrome和Firefox稳定版中,它可以按预期工作。 问题答案: 最终可以追溯到Firefox Nightly中的最新更改。长话短说,选择器上的设置将使其按预期工作。 在这里
自最近(?)Firefox Nightly(35.0a1)的发行版我遇到了一个问题,位于flexbox容器中,该容器具有,每列宽度为50%。 演示: 在夜间,文本将泄漏到其容器外,并且不会附加
本文向大家介绍Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法,包括了Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法的使用技巧和注意事项,需要的朋友参考一下 Index.html 效果如图: 以上这篇Layer.js实现表格溢出内容省略号显示,悬停显示全部的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。
本文向大家介绍bootstrap表格内容过长时用省略号表示的解决方法,包括了bootstrap表格内容过长时用省略号表示的解决方法的使用技巧和注意事项,需要的朋友参考一下 首先 ,bootstrap中当td内容超过我给的固定宽度时,省略号代替的代码如下: 移动端模拟器显示效果是这样的。不是很舒服,完全没按我给他的宽度显示,全靠内容挤出来的。 解决方法: 也就是添加样式 效果出现: table-
在iphone 15pro手机上显示的是单行溢出省略 各位大佬,在移动端如何兼容多行溢出省略呢?