js判断多行文字是否溢出

js实现多行文本溢出省略

实现效果: css: position: relative; line-height: 20px; max-height: 60px; js: function overflowHiddon(el) { var s = el.textContent|| el.innerText; var n = el.offsetHeight; console.log(n); for(var i=0; i<s.length; i++) { el.innerHTML = s.substr(0, i); if(n

多行文字溢出[...]的实现(text-overflow: ellipsis)

声明:此文章为转载(点击查看原文),如有侵权24小时内删除.联系QQ:1522025433. 对于单行文字, 很简单.(详见css3产考手册进入) css: .oneLine { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } 对于多行文字, 上面的代码就不适用了. web-kit based 的浏览器提供了对这个特殊需求的支持. css: .twoLine { overflow:

JS实现中英文混合文字溢出友好截取功能

在显示字符串的时候,避免字符串过长往往会对字符串进行截取操作,通常会用到js的 substr 或者 substring方法, 以及字符串的length属性 substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符. substring() 方法用于提取字符串中介于两个指定下标之间的字符. 对于非中文的字符串处理是很简单的,但是中文字符的 length 属性值是1 而不是 2 ,所以处理就不是很友好了. 例如你有一个字符串 'abcdefg' 和 '

单行文字溢出和多行文字溢出省略号显示的CSS样式

单行文字溢出,CSS样式 <h6 style="width:70px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">{$vo.title}</h6> 多行文字溢出,CSS样式 <p style="width:360px;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:

js或者jq判断一段文字中是否有自己想要的那几个字，如果有就把那几个字变成红色

如何判断一段文字中是否有自己想要的那几个字,如果有就把那几个字变成红色(在html中)比如有body中有这么一串文字“驾驶的后视镜的华盛顿”,想要判断里面是否有“驾驶”这两个字,如果有就把这两个字变成红色代码如下所示: //俩中写法 <p id="d">例如一个里面有个文章:开发部分的二次开发简要说明文档我设置一个关键字,例开发,然后我让这个文章里的“开发”两个字全变红,怎么设置</p> <span style='color: red;'><

css 一行或多行文字溢出以...的形式隐藏

一行文字溢出以...形式隐藏我需要隐藏... css代码如下: white-space:nowrap; text-overflow:ellipsis; overflow:hidden; 多行文字溢出以...形式隐藏(针对webkit内核浏览器) css代码如下: display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; 注意!-webkit-line-clamp:2; 这是2

CSS——div内文字的溢出部分用省略号显示

使得div内文字的溢出部分用省略号显示,可归纳为两种解决办法,一种方法是用CSS解决,另一种方法是js解决. 一.通过CSS控制显示 div内显示一行,超出部分用省略号显示 div内显示多行,超出部分用省略号显示代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>例子</title> <style> /* 单行文字末尾省略号显

CSS实现单行与多行文字省略（truncation）

在上一篇文章小div布局之卡片堆叠(card-stacking)中有多行文字溢出省略的效果,这篇文章就对这种效果(包括单行文字溢出省略)的实现做个简单的记录,以防自己忘记.具体来说,就是要实现这种文字排布效果. html代码如下: <div class="container"> <div class="box"> <div class="box-content"> <h5 class="box-

js判断输入字符串长度（汉字算两个字符，字母数字算一个）

js判断输入字符串长度(汉字算两个字符,字母数字算一个) 文本输入时,由于数据库表字段长度限制会导致提交失败,因此想到了此方法验证. 废话不多说上代码: <html> <head> <title>js判断输入字符串长度(汉字算两个字符,字母数字算一个)</title> <style type="text/css"> .pbt { margin-bottom: 10px; } .ie6 .pbt .ftid a, .ie7 .p

js 判断对象相等

文笔不是很好,一直在博客园属于那种只看不说的那种,有次心血来潮,想把自己的一些心得记录下来,我认认真真写了大半个小时,谁知一点保存,会话超时然后我的东西不知道去哪里,当时想死的心都有,写博客也就没那个兴趣了.平常遇到问题可能就和周围的同事讨论下,然后就是发发贴 ,看有什么解决方案么,但这种情况不是很理想,提出的问题不知道是别人没看懂,还是我没表述清楚,发出去的问题就像肉包子打狗一样,没有了下文.下面进入今天的主题吧. 在js 判断相等常见的就是 == (等同)和===(恒等): ==,

CSS多行文字截断

有时候容器的宽度是固定的,但要显示的文字有点多,就需要将多余的文字隐藏,而且为了表示还有字没有显示,用省略号表示. 类似这样: 单行文字单行文字截断比较明显: .truncate { width: 250px; /* or max-width */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 多行文字多行文字截断就比较棘手,比如对于下面的代码段: <div class="module"&g

(转)用JS判断ckeditor3.6版本编辑器内容为空的方法

因为编者我还是一个初学入门者,无论是JS还是PHP,都是懂了点皮毛.今天在研究ckeditor编辑器的时候遇到了一些问题,虽然这只是我的个人问题,但觉得可以分享给其他人,或许也有像我这样的初学者也会遇到这问题. 好了,现在谈一下这问题. 在接触ckeditor编辑器之前,编者制作的表单都是用的<textarea>标签,比如制作的留言本.新闻发布器等,但由于<textarea>的输入框输入的内容格式单一,基本没什么扩展功能,所以使用了ckeditor编辑器.在这里先声明,编者使用的是

Jquery 选择器详解 js 判断字符串是否包含另外一个字符串

Jquery 选择器详解在线文档地址:http://tool.oschina.net/apidocs/apidoc?api=jquery 各种在线工具地址:http://www.ostools.net/ 一.基本选择器 1 $("#div1").html("hello world 1"); //根据id匹配元素(a) 2 $(".c1").html("hello world 2"); //根据Yclass匹配元素(b)

JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; cha

Js 合并 table 行的实现方法

Js 合并 table 行的实现方法需求如下: 某公司的员工档案,如下, 经理看员工的信息不是很清晰: 姓名所在学校毕业时间张三小学 2000 张三中学 2006 张三大学 2010 李四小学 2000 李四中学 2006 王五小学 2006 所以要求要求姓名一列如果发现挨着的名字相同的话,将其合并为一行,如下图所示: 姓名所在学校毕业时间张三小学 2000 中学 2006 大学 2010 李四小学 2000 中学 2006 王五小学 2006 这样看起来是不

JS判断字符串变量是否含有某个字串的实现方法

JS判断字符串变量是否含有某个字串的实现方法 varCts = "bblText"; if(Cts.indexOf("Text") > 0 ){ alert('Cts中包含Text字符串'); } indexOf用法: 返回 String 对象内第一次出现子字符串的字符位置. strObj.indexOf(subString[, startIndex]) 参数 strObj 必选项.String 对象或文字. subString 必选项.要在 String 对

CAD参数绘制多行文字（网页版）

在CAD设计时,需要绘制多行文字,用户可以设置设置绘制文字的高度等属性. 主要用到函数说明: _DMxDrawX::DrawMText 绘制一个多行文字.详细说明如下: 参数说明 DOUBLE dPosX 多行文字位置的X坐标 DOUBLE dPosY 多行文字位置的Y坐标 BSTR pszContents 多行文字的内容 DOUBLE dHeight 多行文字的高度 DOUBLE dWidth 多行文字的显示宽度 DOUBLE dRotation 多行文字的旋转角度 SHORT iAttac

JS判断字符串包含的方法

本文实例讲述了JS判断字符串包含的方法.分享给大家供大家参考.具体如下: 1. 例子: 1 2 3 4 5 6 7 8 var tempStr = "tempText" ; var bool = tempStr.indexOf("Texxt"); //返回大于等于0的整数值,若不包含"Text"则返回"-1. if(bool>0){ document.write("包含字符串"); }else{ documen

CAD绘制多行文字

在CAD设计时,需要绘制多行文字,用户可以设置设置绘制文字的高度等属性. 主要用到函数说明: _DMxDrawX::DrawMText 绘制一个多行文字.详细说明如下: 参数说明 DOUBLE dPosX 多行文字位置的X坐标 DOUBLE dPosY 多行文字位置的Y坐标 BSTR pszContents 多行文字的内容 DOUBLE dHeight 多行文字的高度 DOUBLE dWidth 多行文字的显示宽度 DOUBLE dRotation 多行文字的旋转角度 SHORT iAttac

关于client浏览器界面文字内容溢出用省略号表示方法

在实际的项目中,因为client浏览器文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其它标签,下同)区域的情况.此时比較好的做法就是当文字超过限定的div宽度后自己主动以省略号(-)显示,这样.依照习惯,人们都会知道这儿有文字被省略了. 使用CSS截断字符串方法 CSS中有个属性叫做text-overflow:ellipsis. 说明:长处是内容能够为不论什么HTML元素.包含超链接和图片等,在IE6中还会在结尾自己主动显示省略号.缺点是必须指定宽度数值.而且宽度不能

js判断变量是否为undefined

可能很多朋友认为undefined是在js中未定义变量时才会提示的错误,其实不然undefined 是js中的一特殊的变量,我们也可以提前定义哦,下面我来介绍js undefined 用法. JavaScript 中有两个特殊数据类型:undefined和 null,下面谈谈 undefined 的判断. js判断undefined类型代码如下复制代码if (reValue== undefined){ alert(undefined);}发现判断不出来,最后查了下资料要用typeof方法:代码如

js判断多行文字是否溢出

热门专题