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 相关文章推荐
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
Jquery 表单验证类介绍与实例
Jun 09 Javascript
JQuery操作三大控件(下拉,单选,复选)的方法
Aug 06 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
Jun 25 Javascript
jQuery实现连续动画效果实例分析
Oct 09 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
用JavaScript做简易的购物车的代码示例
Oct 20 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
如何解决vue2.0下IE浏览器白屏问题
Sep 13 Javascript
详解基于webpack&amp;gettext的前端多语言方案
Jan 29 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
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
实现树状结构的两种方法
2006/10/09 PHP
CURL状态码列表(详细)
2013/06/27 PHP
php对称加密算法示例
2014/05/07 PHP
php实现生成验证码实例分享
2016/04/10 PHP
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
基于javascript实现tab切换特效
2016/03/29 Javascript
jQuery的内容过滤选择器学习教程
2016/04/18 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
javascript中BOM基础知识总结
2017/02/14 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
js 事件的传播机制(实例讲解)
2017/07/20 Javascript
傻瓜式解读koa中间件处理模块koa-compose的使用
2018/10/30 Javascript
[原创]微信小程序获取网络类型的方法示例
2019/03/01 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
2019/03/04 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
在Vue项目中使用Typescript的实现
2019/12/19 Javascript
JS 事件机制完整示例分析
2020/01/15 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
python对字典进行排序实例
2014/09/25 Python
在Python中封装GObject模块进行图形化程序编程的教程
2015/04/14 Python
Python下rrdtool模块的基本使用方法
2015/11/13 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
django.db.utils.ProgrammingError: (1146, u“Table‘’ doesn’t exist”)问题的解决
2018/07/13 Python
python 调用有道api接口的方法
2019/01/03 Python
解决Django Static内容不能加载显示的问题
2019/07/28 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
django在开发中取消外键约束的实现
2020/05/20 Python
利用CSS3的transition属性实现滑动效果
2015/08/05 HTML / CSS
日本土著品牌,综合型购物网站:Cecile
2016/08/23 全球购物
世界上最大的罕见唱片、CD和音乐纪念品网上商店:991.com
2018/05/03 全球购物
Famous Footwear加拿大:美国多品牌运动休闲鞋店
2018/12/05 全球购物
劳资人员岗位职责
2013/12/19 职场文书
搞笑老公保证书
2015/02/26 职场文书
门球健将观后感
2015/06/16 职场文书
利用 JavaScript 构建命令行应用
2021/11/17 Javascript
Golang map映射的用法
2022/04/22 Golang