HTML长文本截取含有HTML代码同样适用的两种方法


Posted in Javascript onJuly 31, 2013

方法一:用CSS截断字符串:IE,FireFox,Opera ,Safari都兼容

.subLongText{ 
width:150px; 
height:24px; 
overflow:hidden; 
white-space:nowrap; 
text-overflow:ellipsis; 
text-overflow: ellipsis;/* IE/Safari */ 
-ms-text-overflow: ellipsis; 
-o-text-overflow: ellipsis;/* Opera */ 
-moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/ 
} 
<span class="subLongText">任意长度文本</span>

方法二:用js截取
<HTML> 
<HEAD> 
<TITLE>JQUERY 文本截取方法</TITLE> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="jquery-1.3.2.js"></script> 
<script type="text/javascript"> 
$.fn.substr = function(length,content){ 
$(this).each(function(i,item){ 
var val=$(item).html(); 
if(!val) return; 
if(val.length>length) { 
val = val.substring(0,length); 
val += content || "..." 
$(item).html(val); 
} 
}); 
} 
function subTdContent(){ 
$('td').substr(20); 
} 
</script> 
</HEAD> 
<BODY onload="javascript:subTdContent();"> 
<table style="border:1px solid #b3c0f5;" border="1"> 
<tr> 
<td>我是代码:$.fn.substr = function(l,c){ $(this).each(function(i,item)</td> 
<td>以下两种方式都可以解决textarea行高自动适应类容的高度</td> 
<td>以下两种方式都可以解决textarea行</td> 
</tr> 
</table> 
</BODY> </HTML>
Javascript 相关文章推荐
JavaScript中的View-Model使用介绍
Aug 11 Javascript
用js实现小球的自由移动代码
Apr 22 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
Feb 25 Javascript
Node.js项目中调用JavaScript的EJS模板库的方法
Mar 11 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
Vue axios设置访问基础路径方法
Sep 19 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
js实现全选和全不选
Jul 28 Javascript
Java 生成随机字符的示例代码
Jan 13 Javascript
手动实现vue2.0的双向数据绑定原理详解
Feb 06 Vue.js
JS的千分位算法实现思路
Jul 31 #Javascript
一个JS的日期格式化算法示例
Jul 31 #Javascript
jquery实现div拖拽宽度示例代码
Jul 31 #Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 #Javascript
javascript获取下拉列表框当中的文本值示例代码
Jul 31 #Javascript
禁用页面部分JavaScript方法的具体实现
Jul 31 #Javascript
jquery 单引号和双引号的区别及使用注意
Jul 31 #Javascript
You might like
PHP学习之数组值的操作
2011/04/17 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
php中的curl_multi系列函数使用例子
2014/07/29 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
鼠标图片振动代码
2006/07/06 Javascript
js中判断控件是否存在
2010/08/25 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
JS取request值以及自动执行使用示例
2014/02/24 Javascript
javascript中attribute和property的区别详解
2014/06/05 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
JavaScript几种数组去掉重复值的方法推荐
2016/04/12 Javascript
jquery删除table当前行的实例代码
2016/10/07 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
Javascript实现运算符重载详解
2018/04/07 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
python计算圆周长、面积、球体体积并画出圆
2014/04/08 Python
python装饰器初探(推荐)
2016/07/21 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
详解Python如何生成词云的方法
2018/06/01 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
浅谈Python大神都是这样处理XML文件的
2019/05/31 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
集中整治工作方案
2014/05/01 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery