HTML长文本截取含有HTML代码同样适用的两种方法
更新时间：2013年07月31日 18:05:21 作者：
正如标题所言我们可以使用CSS截断字符串：IE,FireFox，Opera ，Safari都兼容也可以使用js截取，具体实现如下，希望对大家有所帮助
方法一：用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>
复制代码 代码如下:
.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>
相关文章
这篇文章主要为大家详细介绍了js原生瀑布流插件制作，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章给大家介绍js组件系列之Bootstrap Icon图标选择组件，对bootstrap icon图标相关知识感兴趣的朋友一起学习吧2016-01-01
这篇文章主要为大家详细介绍了js仿小米官网图片轮播特效,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
一个父容器也是window的window下的comboBox在页面中点击无效，但是在控制台中查看它的store却是有值的，问题在于没有显示。下面小编给大家分享Extjs下拉框不显示的问题，需要的的朋友参考下吧2017-06-06
这篇文章主要为大家介绍了javascript解锁前端密码框常见功能做法示例演示，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步早日升职加薪2022-03-03
下面小编就为大家带来一篇用iframe实现不刷新整个页面上传图片的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
JS 如果改变span标签的是否隐藏属性,大家根据需要选择使用。2011-10-10
jquery和css3中的选择器nth-child使用方法和用途示例
nth-child()，是CSS3中的一个伪类选择符，JQuery选择器继承了CSS的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。2023-03-03
本文给大家汇总了2个原生JavaScript实现的计算器功能的代码，一个简单一个稍微复杂些，小伙伴们根据自己的需要来选择吧2016-10-10
因为经常被Javascript中的rul的相关知识困扰，今天来总结一下URL的特殊字符2011-11-11
最新评论