CSS方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用css截取标题，更利于seo</title> </head> <body> <div style=" 150px; font-size:12px; height: 50px; border: 1px solid blue; overflow: hidden; text-overflow:ellipsis; -o-text-overflow: ellipsis; white-space:nowrap;"> 就是比如有一行文字，很长，表格内一行显示不下 </div> </body> </html>
JavaScript实现文本过长自动省略
一般情况下，如果要控制一段文字超出长度可以用CSS 去控制
下面我来介绍2种用js控制字符数长度显示的方法,其实这2个方法也是大同小异
方法一:
<script type="text/javascript"> function check(node){ var str = node.firstChild.nodeValue; if(str.length>10){ node.firstChild.nodeValue = str.substring(0,10) + "..."; } } window.onload=function(){ var tagK = document.getElementByIdx_x("kk2"); check(tagK); // tagK里面不能再包含别的标签 } </script>
方法二:
<script type="text/javascript"> function checkWord(element) { var innerText = (typeof element.textContent == "string") ? element.textContent : element.innerText; //注意:因为 不同浏览器对innerText 和textContent的兼容,这里是为了匹配不同浏览的兼容性,IE,Safari,Chrome,Opera支持innerText属性，Firefox不支持innerText，但是支持作用类似的textContent属性 var wlength = innerText.length; if(wlength>20) { var shortWord = innerText.substr(0,10); element.innerHTML = shortWord +"..."; } } window.onload=function() { var tag = document.getElementByIdx_x("kk"); var tagNode = document.getElementsByTagName_r("p"); checkWord(tag); for(var i=0; i<tagNode.length; i++) { checkWord(tagNode[i]);} } </script>
我们以下面的HTML 代码为例进行应用:
<div id="kk1"><span class="fg">gggggggggggggkkkkkkkkkkffffff</span>如果是长的就对宽进行变形</div>
<div id="kk2">gggggggggggggkkkkkkkkkkffffff如果是长的就对宽进行变形</div>
<p>ghghgh首先判断图片是长的还是宽的。如果是长的就对宽进行变形，否则对高进行变形</p>
<p><span class="fg">gggggggggggggkkkkkkkkkkffffff</span>首先判断图片是长的还是宽的。如果是长的就对宽进行变形，否则对高进行变形</p>
<p><span class="fg">gggggggggggggkkkkkkkkkkffffff</span>首先判断图片是长的还是宽的。如果是长的就对宽进行变形，否则对高进行变形</p>