Two methods that are equally applicable to intercepting long HTML text containing HTML code

Home

Web Front-end

JS Tutorial

Two methods that are equally applicable to intercepting long HTML text containing HTML code_javascript skills

May 16, 2016 pm 05:27 PM

html code

Method 1: Use CSS to truncate the string: IE, FireFox, Opera, and Safari are all compatible

Copy code The code is as follows:

 
.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">Any length text</span> 

Method 2: Use js to intercept

Copy the code The code is as follows:

 
<HTML> 
<HEAD> 
<TITLE>JQUERY text interception method</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>My code: $.fn.substr = function(l,c){ $(this).each(function(i,item)</td> 
<td>The following two methods can solve the problem that the textarea row height automatically adapts to the height of the class content</td> 
&lt ;td>The following two ways can solve the textarea row</td> 
</tr> 
</table> 
</BODY> </HTML> 

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn