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);

Have you tried the psuedo-algorithm: if length-of-string>n string<=left(string,n); string<=concatenate(string, "...")? By the way, we use an ellipsis, which is exactly three dots, to indicate an omitted part. — Kris, Dec 26 '11 at 11:46
@Krish: I never heard about psuedo-algorithm. Can you explain little bit more with example? — selladurai, Dec 26 '11 at 11:54
possible duplicate of [Insert ellipsis (...) into HTML tag if content too wide](http://stackoverflow.com/questions/536814/insert-ellipsis-into-html-tag-if-content-too-wide) — outis, Dec 26 '11 at 12:03

score 4 · Accepted Answer · answered Dec 26 '11 at 11:44

4

You can try this css

text-overflow:ellipsis;

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

answered Dec 26 '11 at 11:44

RageZ

26,800
12
67
76

score 3 · Answer 2 · answered Dec 26 '11 at 11:44

3

see if css ellipsis can help you. You can find more details at

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

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

answered Dec 26 '11 at 11:44

Pavan

4,209
1
22
25

score 1 · Answer 3 · edited Dec 26 '11 at 12:32

1

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/

edited Dec 26 '11 at 12:32

Muhammad Usman

12,439
6
36
59

answered Dec 26 '11 at 11:45

Sudhir Bastakoti

99,167
15
158
162

1

Please acknowledge your source – Abdul Munim Dec 26 '11 at 11:48

score 1 · Answer 4 · answered Dec 26 '11 at 11:51

1

style="text-overflow: ellipsis;"

will solve the problem.

answered Dec 26 '11 at 11:51

Chandra Sekhar

16,256
10
67
90

how to break the long word in html?

4 Answers4

Related