文字截取，多余文字用省略号(...)代替

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="width: 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>

 

posted @ 2014-12-30 10:49  lanyan  阅读(917)  评论(0)  编辑  收藏  举报