how to break the long word in html?

Question

I'm creating list dynamically in javascript. I want to break the long word in as dot dot dot(.....). For example, if the word is "Software life cycle development" I want to change it as "Software life cycl....".

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

Software life cycle development.

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;

It would put ... when the text overflow. see this page for your reference.