Question

我们已经开发了代码，使得文本应该在200个字符后截断，但是当在文本之间添加超链接时，它不能按预期工作。在这种情况下，即使在200个字符之前，文本也会截断。

我附上了截图，1。文本正确截断，2.hyperlink添加where文本未正确截断。

请让我知道在添加超级链接时，可以在200个字符后正确截断文本。

任何帮助都将不胜感激!!

enter image description here ur.com/7XSjr.png

enter code here

Java script :
var MAX_CHARS = 200;
  var ELLIP = String.fromCharCode(8230);
  function truncateIdeaText (str) {
    if (str.length < MAX_CHARS) return str;
    return str.substr(0, MAX_CHARS) + ' ' + ELLIP;
  }

  var tagIdx = 0;
  /* Creates a single block (closeup)*/
  function createCloseup (idea, pageNr) {
    var d = jQuery('<div>', {'class': 'ideasblock'});
    // the bellow replace of /ideas/ to /Ideas/ id to get arround the ideas rewrite file
    d.append("<a class='ideas-link' href='"+browserUrl+"/"+idea.roomId+"/"+"'><img src='" + idea.image + "' width='512' data-page-nr='" + pageNr + "' onclick=javascript:fnSubmit('"+idea.roomId+"'); />" +
    "<h2 class='ideasHeadLine'>" + idea.headLine + "</h2>" +
    "<div class='ideasdate'>" + idea.startDate + "</div>" +
    "<p class='ideasPara'>" + truncateIdeaText(idea.text) + "</p>"); 

CSS : 

a.ideas-link {
        color: inherit !important;
        text-decoration: none !important;
    }
    a.ideas-link:hover  .ideasHeadLine {
        text-decoration: underline;
    }   

.ideasPara{
        margin-top: 10px;
        margin-bottom: 0px;
        text-align: left;
        left: 0px;
        width: 512px; 
        display:block;
        font-family: 'Verdana';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #333333;
        line-height: 18px;
    }

Answer 1

在我看来，最简单的解决方案（代码更改最少）可能是这样的 -
定义更多变量（即linkTagBaseLength，linkHrefLength等）然后使用布尔变量来确定链接是否存在。

在函数truncateIdeaText()中使用此代码以及MAX_CHARS。

然而，如果您希望将链接显示为屏幕上的代码，则不清楚（请参阅我的上述解决方案）。

如果您希望另一方面添加指向跨度的链接作为html元素
我建议你首先创建你需要的元素（在局部变量中定义它们以便更好地控制程序）然后使用jquery的append函数。

（see this question代码示例）。

或者您可以随时使用Javascript的Document.createElement()功能。

在html中添加超链接时，文本没有正确截断

1 个答案: