javascript - how to break the long word in html? - Stack Overflow

admin管理员组

文章数量:1292225

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

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

• javascript
• html

Share Improve this question Follow edited Dec 26, 2011 at 12:02 selladurai asked Dec 26, 2011 at 11:41 selladuraiselladurai 6,7891414 gold badges5858 silver badges8989 bronze badges 3

• 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 Commented Dec 26, 2011 at 11:46
• @Krish: I never heard about psuedo-algorithm. Can you explain little bit more with example? – selladurai Commented Dec 26, 2011 at 11:54
• possible duplicate of Insert ellipsis (...) into HTML tag if content too wide – outis Commented Dec 26, 2011 at 12:03

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

You can try this css

text-overflow:ellipsis;

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

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

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

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

style="text-overflow: ellipsis;"

will solve the problem.

Try:

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

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

本文标签： javascripthow to break the long word in htmlStack Overflow