截断字符串在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个字符，并且具有添加在端“更多”的链接Div元素。我正在使用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>'); 

       }

如果您有任何问题，请告诉我们您的代码。 – dfsq 2013-02-27 14:03:00

你不能使用css解决方案吗？它必须是一定数量的字符吗？看到这里为CSS信息https://developer.mozilla.org/en-US/docs/CSS/text-overflow – Dreamwalker 2013-02-27 14:07:28

@Zonder它不会剪辑文本多达125个字符，因为它取决于元素的宽度。 – 2013-02-27 14:10:41

答

那么，这是为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);

答

任何理由，你为什么要使用JavaScript？不是每个人都启用它。如果你有你的服务器上的PHP，你可以这么做，

echo substr($inputText, 0, 125);

答

我已经使用了以下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>

截断字符串在Div元素

相关推荐