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 相关文章推荐
JS画线(实例代码)
Nov 20 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
js实现跨域的方法实例详解
Jun 24 Javascript
jfinal与bootstrap的登录跳转实战演习
Sep 22 Javascript
jQuery模仿单选按钮选中效果
Jun 24 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
vue实现仿淘宝结账页面实例代码
Nov 08 Javascript
React数据传递之组件内部通信的方法
Dec 31 Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
在 Vue.js中优雅地使用全局事件的方法
Feb 01 Javascript
微信小程序页面渲染实现方法
Nov 06 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
星际争霸中的热键
2020/03/04 星际争霸
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP多例模式介绍
2013/06/24 PHP
PHP常量使用的几个需要注意的地方(谨慎使用PHP中的常量)
2014/09/12 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP请求Socket接口测试实例
2016/08/12 PHP
window.open的功能全解析
2006/10/10 Javascript
20个非常棒的Jquery实用工具 国外文章
2010/01/01 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
python启动办公软件进程(word、excel、ppt、以及wps的et、wps、wpp)
2009/04/09 Python
Python3字符串学习教程
2015/08/20 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
利用Python中SocketServer 实现客户端与服务器间非阻塞通信
2016/12/15 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
django2 快速安装指南分享
2018/01/05 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python 3.7新功能之dataclass装饰器详解
2018/04/21 Python
Python面向对象基础入门之编码细节与注意事项
2018/12/11 Python
Python3解释器知识点总结
2019/02/19 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
css3新增颜色表示方式分享
2014/04/15 HTML / CSS
基于HTML5的WebGL实现json和echarts图表展现在同一个界面
2017/10/26 HTML / CSS
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
党的群众路线教育学习材料
2014/05/12 职场文书
村党支部群众路线教育实践活动对照检查材料
2014/09/26 职场文书
音乐教师求职信范文
2015/03/20 职场文书
小学生心理健康活动总结
2015/05/08 职场文书
行政申诉状范文
2015/05/20 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
python 逐步回归算法
2021/04/06 Python