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精华代码集
Jan 24 Javascript
js常见表单应用技巧
Jan 09 Javascript
Jquery中find与each方法用法实例
Feb 04 Javascript
基于jQuery实现在线选座之高铁版
Aug 24 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
微信小程序websocket实现聊天功能
Mar 30 Javascript
微信小程序导航栏跟随滑动效果的实现代码
May 14 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
Aug 15 Javascript
echarts实现晶体球面投影的实例教程
Oct 10 Javascript
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
JavaScript 实现页面滚动动画
Apr 24 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php set_magic_quotes_runtime() 函数过时解决方法
2010/07/08 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php生成高清缩略图实例详解
2015/12/07 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP mysqli_free_result()与mysqli_fetch_array()函数详解
2016/09/21 PHP
JavaScript 对象模型 执行模型
2009/12/06 Javascript
Jquery下EasyUI组件中的DataGrid结果集清空方法
2014/01/06 Javascript
基于JS代码实现导航条弹出式悬浮菜单
2016/06/17 Javascript
javascript实现的左右无缝滚动效果
2016/09/19 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
2017/05/31 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
vue-cli 关闭热更新操作
2020/09/18 Javascript
[48:24]完美世界DOTA2联赛PWL S3 Forest vs INK ICE 第一场 12.09
2020/12/12 DOTA
[51:53]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第二场 1月24日
2021/03/11 DOTA
Python函数的周期性执行实现方法
2016/08/13 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python实现五子棋小程序
2019/06/18 Python
Python如何转换字符串大小写
2020/06/04 Python
深入理解css属性的选择对动画性能的影响
2016/04/20 HTML / CSS
如何将整数int转换成字串String
2014/03/21 面试题
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
几个MySql的面试题
2013/04/22 面试题
房屋改造计划书
2014/01/10 职场文书
商务邀请函范文
2014/01/14 职场文书
新书发布会策划方案
2014/06/09 职场文书
关于调整工作时间的通知
2015/04/24 职场文书
2015年党总支工作总结
2015/05/25 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
CSS3 制作的悬停缩放特效
2021/04/13 HTML / CSS
Python基础之操作MySQL数据库
2021/05/06 Python
python内置进制转换函数的操作
2021/06/02 Python