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 相关文章推荐
关于jQuery新的事件绑定机制on()的使用技巧
Apr 26 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
Mar 20 Javascript
基于replaceChild制作简单的吞噬特效
Sep 21 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
Jan 21 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
Vue.js的复用组件开发流程完整记录
Nov 29 Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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判断变量的函数
2012/04/24 PHP
php获取数组中重复数据的两种方法
2013/06/28 PHP
学习YUI.Ext 第七天--关于View&amp;JSONView
2007/03/10 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
js模拟类继承小例子
2010/07/17 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
js仿3366小游戏选字游戏
2016/04/14 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
Javascript中字符串replace方法的第二个参数探究
2016/12/05 Javascript
Bootstrap框架安装使用详解
2017/01/21 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
使用express搭建一个简单的查询服务器的方法
2018/02/09 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
layui form表单提交后实现自动刷新
2019/10/25 Javascript
在Vue项目中,防止页面被缩放和放大示例
2019/10/28 Javascript
layui 弹出层值回传解决方式
2019/11/14 Javascript
js属性对象的hasOwnProperty方法的使用
2021/02/05 Javascript
[53:29]完美世界DOTA2联赛循环赛 DM vs Matador BO2第二场 11.04
2020/11/05 DOTA
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
详解python中的json和字典dict
2018/06/22 Python
python实现多进程代码示例
2018/10/31 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python中包的用法及安装
2020/02/11 Python
解决keras模型保存h5文件提示无此目录问题
2020/07/01 Python
使用Django的JsonResponse返回数据的实现
2021/01/15 Python
钉钉企业内部H5微应用开发详解
2020/05/12 HTML / CSS
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
美国豪华的多品牌精品店:The Webster
2019/07/31 全球购物
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
小学生学习感言
2014/03/10 职场文书
自强自立美德少年事迹材料
2014/08/16 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书