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 相关文章推荐
datePicker——日期选择控件(with jquery)
Feb 20 Javascript
一段利用WSH获取登录时间的jscript代码
May 11 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
jQuery中slice()方法用法实例
Jan 07 Javascript
Bootstrap3制作搜索框样式的方法
Jul 11 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
jQuery实现checkbox全选功能完整实例
Jul 12 jQuery
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 Javascript
详解CocosCreator项目结构机制
Apr 14 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
php 图片上传类代码
2009/07/17 PHP
php连接数据库代码应用分析
2011/05/29 PHP
浅析PHP安装扩展mcrypt以及相关依赖项(PHP安装PECL扩展的方法)
2013/07/05 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
PHP PDO和消息队列的个人理解与应用实例分析
2019/11/25 PHP
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
JavaScript学习笔记之内置对象
2015/01/22 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
通过实例理解javascript中没有函数重载的概念
2015/06/03 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
微信小程序 for 循环详解
2016/10/09 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
Vue单页式应用(Hash模式下)实现微信分享的实例
2017/07/21 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
Nodejs监控事件循环异常示例详解
2019/09/22 NodeJs
基于JS实现table导出Excel并保留样式
2020/05/19 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
python运用sklearn实现KNN分类算法
2019/10/16 Python
详解python中*号的用法
2019/10/21 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
澳大利亚男士西服品牌:M.J.Bale
2018/02/06 全球购物
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
马歇尔耳机官网:Marshall Headphones
2020/02/04 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
财务会计专业求职信
2014/06/09 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
2014年物流工作总结
2014/11/25 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
2015年乡镇卫生院工作总结
2015/04/22 职场文书
圆明园纪录片观后感
2015/06/03 职场文书
创业计划书之校园超市
2019/09/12 职场文书
vue3中provide && inject的使用
2021/07/01 Vue.js