How to break a long word in html?

Question

I am dynamically creating a list in javascript. I want to break a long word like dot dot dot dot (.....). For example, if the word "Software Life Cycle Development", I want to change it to "Software Life Cycle ...".

And I used "WORD-BREAK: BREAK-ALL, white-space: normal;" My current output:

Software development life cycle.

Can anyone tell how to fix this? thanks in advance.

var parent = document.getElementById('searchlistview'); var listItem = document.createElement('li'); listItem.setAttribute('id', 'listitem_' + listId); listItem.setAttribute('data-icon', 'false'); listItem.innerHTML = "<img src=" + imagesrc + " class='ui-li-icon ui-li-has-icon'></img> <a target='_black' data-role='button' href='#' id=" + listId + " name= " + url + " data-theme ='c' rel='external' data-inline='true' style='margin-left:0em; WORD-BREAK:BREAK-ALL;white-space:normal; ' >" + searchName + "<p style='margin-top:1px;margin-left:1px;'> File size: " + fileSize + "</p></a>"; parent.appendChild(listItem); 

Answer 1

You can try this css

 text-overflow:ellipsis; 

He would have placed ... overflowing text. See this page for reference.

Answer 2

see if css ellipsis helps you. You can find more information in

http://www.w3schools.com/cssref/css3_pr_text-overflow.asp

http://mattsnider.com/css/css-string-truncation-with-ellipsis/

Answer 3

Try:

 function wbr(str, num) { return str.replace(RegExp("(\\w{" + num + "})(\\w)", "g"), function(all,text,char){ return text + "<wbr>" + char; }); } 

Source: http://ejohn.org/blog/injecting-word-breaks-with-javascript/

Answer 4

 style="text-overflow: ellipsis;" 

will solve the problem.