Texts are not truncating properly when the hyper link is added in html

Question

We have developed the code such that the text should get truncate after 200 characters ,But it is not working as expected when a hyperlink is added in between the text . In this case , the texts are truncating even before 200 characters .

I have attached both the screenshots , 1. texts are truncating properly and 2.hyperlink added where texts are not truncating correctly .

Please let me know what can be done here to make the text truncate properly after 200 characters when the hyper link is added .

Any help would be appreciated !!

enter image description hereur.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;
    }

score 1 · Answer 1 · edited May 23 '17 at 11:44

The simplest solution (with minimal code changes) in my opinion could be this -
Define a few more variables (i.e. linkTagBaseLength, linkHrefLength etc.)
then use a boolean variable to figure out if the link exists or not.

The use this code inside the function truncateIdeaText() together with MAX_CHARS.

It is however unclear if you wish to show the link as a code on screen (see my above solution).

If you wish on the other hand to add a link to the span as html elements
I would suggest you create the elements you need first (define them in local variables for better control of the program) and use then use jquery's append function.

(see this question for code example).

Or you can always use Javascript's Document.createElement() function.

Texts are not truncating properly when the hyper link is added in html

1 Answers1