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时间日期和毫秒的相互转换
Feb 22 Javascript
页面定时刷新(1秒刷新一次)
Nov 22 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
简单实现js拖拽效果
Jul 25 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
解决layer.prompt无效的问题
Sep 24 Javascript
国内常用的js类库大全(CDN公共库)
Jun 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
php自动跳转中英文页面
2008/07/29 PHP
php eval函数用法总结
2012/10/31 PHP
PHP正则提取不包含指定网址的图片地址的例子
2014/04/21 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
使用onbeforeunload属性后的副作用
2007/03/08 Javascript
jQuery的强大选择器小结
2009/12/27 Javascript
JS编程小常识很有用
2012/11/26 Javascript
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
Jqgrid设置全选(选择)及获取选择行的值示例代码
2013/12/28 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
JS基于Ajax实现的网页Loading效果代码
2015/10/27 Javascript
js设置和获取自定义属性的方法
2016/10/20 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
详解NODEJS的http实现
2018/01/04 NodeJs
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
js实现移动端tab切换时下划线滑动效果
2019/09/08 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python数据分析工具之 matplotlib详解
2020/04/09 Python
基于Keras的格式化输出Loss实现方式
2020/06/17 Python
Python爬虫之Selenium实现窗口截图
2020/12/04 Python
专科毕业生求职简历的自我评价
2013/10/12 职场文书
金属材料工程个人求职的自我评价
2013/12/04 职场文书
自荐书范文范例
2014/02/13 职场文书
古汉语文学求职信范文
2014/03/16 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
先进基层党组织材料
2014/12/25 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
详解Java线程池是如何重复利用空闲线程的
2021/06/26 Java/Android
Java tomcat手动配置servlet详解
2021/11/27 Java/Android