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 ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
Jan 06 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
jQuery生成假加载动画效果
Dec 01 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
php 修改密码实现代码
May 24 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
基于Vue+element-ui 的Table二次封装的实现
Jul 20 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
vue项目如何监听localStorage或sessionStorage的变化
Jan 04 Vue.js
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删除特定数组内容并且重建数组索引的方法.
2011/03/25 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
基于javascript实现单选及多选的向右和向左移动实例
2015/07/25 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
jquery mobile界面数据刷新的实现方法
2016/05/28 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
2016/07/01 Javascript
关于javascript获取内联样式与嵌入式样式的实例
2017/06/01 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
Angular实现可删除并计算总金额的购物车功能示例
2017/12/26 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
2018/01/06 jQuery
webpack引入eslint配置详解
2018/01/22 Javascript
JS中获取 DOM 元素的绝对位置实例详解
2018/04/23 Javascript
详解ES7 Decorator 入门解析
2019/02/18 Javascript
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
jQuery插件simplePagination的使用方法示例
2020/04/28 jQuery
微信小程序通过websocket实时语音识别的实现代码
2020/08/19 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
python监控键盘输入实例代码
2018/02/09 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
简单了解python代码优化小技巧
2019/07/08 Python
Python实现扫码工具的示例代码
2020/10/09 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
UNIX文件系统常用命令
2012/05/25 面试题
超市业务员岗位职责
2013/12/05 职场文书
九年级体育教学反思
2014/01/23 职场文书
2014年入党积极分子学习三中全会思想汇报
2014/09/13 职场文书
2014年终个人工作总结
2014/11/07 职场文书
珍爱生命主题班会
2015/08/13 职场文书
python编写五子棋游戏
2021/05/25 Python
SpringBoot 整合mongoDB并自定义连接池的示例代码
2022/02/28 MongoDB