在Div元素中将字符串截断为125个字符

时间:2013-02-27 14:01:55

标签: javascript html dojo truncate

我的Div元素具有以下内容

It is a dummy text Lorem Ipsum Iswwpe ID DFDLJLKDjlk It is a dummy text Lorem Ipsum Iswwpe ID DFDLJLKDjlk It is a dummy text Lorem Ipsum Iswwpe ID DFDLJLKDjlk <a href="#">click here</a>

我必须将DIV内容修剪为125个字符,并且必须在末尾添加“更多”链接。我使用DOJO库作为JS库

以下代码我用于修剪和替换更多链接。但是,长度包括<a href="#"> and </a>标签。我不想只获得文字长度。

                var name= elm.innerHTML;                    
                if(name.length > 125){
                     var subtext = name.substring(125, feednamelength);name.replace(subtext , '<a href="#">More</a>');

                }

3 个答案:

答案 0 :(得分:0)

嗯,这是针对javascript的。 Demo

function short(length) {
    var s = document.getElementsByTagName("div");
    var len = s.length;
    for(var i = 0; i < len; i++) {
       var g = s[i].innerHTML;
       var x = ". . . More";
       var leng = length-5;
       var html = g.substring(0, leng)+"";
       var allHTML = html+x;
       s[i].innerHTML = allHTML;
    }
}
short(125);

答案 1 :(得分:0)

你必须使用Javascript的任何理由?不是每个人都启用它。如果您的服务器上有PHP,那么就可以了,

echo substr($inputText, 0, 125);

答案 2 :(得分:0)

我在类似的情况下使用了以下css解决方案。它基于悬停而不是点击“更多”,但表现得相当不错。

<style type="text/css">
.longtextautoexpand {
max-width:350px;
white-space:nowrap; 
overflow:hidden;
text-overflow:ellipsis;
}
.longtextautoexpand:hover {
overflow:visible;
}
</style>

<p class="longtextautoexpand">
When text must stay on one line, but there is not enough room for it all, this article      provides a solution.
</p>