I'm using the below code for wrapping long text, entered by users in a text area for menting:

function addNewlines(ments) {
  var result = '';
  while ($.trim(ments).length > 0) {

    result += ments.substring(0,70) + '\n';
    ments = ments.substring(70);
  }
  return result;
}

The problem is shown in the below screen shot. Any ideas on how to solve it? Can we use lastindexof(" ") method to get the last space in a substring to solve this issue logically? Can anyone tweak this little code to make it right?

I'm using the below code for wrapping long text, entered by users in a text area for menting:

function addNewlines(ments) {
  var result = '';
  while ($.trim(ments).length > 0) {

    result += ments.substring(0,70) + '\n';
    ments = ments.substring(70);
  }
  return result;
}

The problem is shown in the below screen shot. Any ideas on how to solve it? Can we use lastindexof(" ") method to get the last space in a substring to solve this issue logically? Can anyone tweak this little code to make it right?

• javascript
• jquery

• 2 Why can't you just put it in an element with a set width and let the browser handle wrapping the lines for you? – alex Commented Apr 22, 2013 at 6:56
• 2 Java tag doesn't belong here. – Maroun Commented Apr 22, 2013 at 6:57
• 1 Try using Justification css style for text area – dreamweiver Commented Apr 22, 2013 at 6:59
• but css doesnt work for all browsers – tina Commented Apr 22, 2013 at 7:01
• 1 @tina you mean "specific CSS" I assume? CSS works in all browsers ;) That's the whole point :P – user1467267 Commented Apr 22, 2013 at 7:01

8 Answers 8

I believe wrapping a text by CSS is a better solution however there is a link here which may be helpful wrap-text-in-javascript

by the way i remember there is a JQuery plugin for wrapping text google it too.

Try word-wrap: break-word in CSS.
The word-wrap property is well supported by browsers (even IE 5.5+).
More info here: https://developer.mozilla/en-US/docs/CSS/word-wrap
Sample usage: FIDDLE

Try one of these:

1. word-wrap:no-wrap;
2. word-wrap: break-word

It might solve your problem

The ones above only work 99% of the time. This is the only one that works for me 100%: http://locutus.io/php/strings/wordwrap/

Hi just apply some css on text area like

style="word-wrap: break-word;" 

I use this css code for displaying in Torch browser and it works

I've tried word-wrap:break-word;overflow:ellipsis;....etc, but didn't work.

#xxx{

 width: 750px;
 word-break: break-word;

}

After looking for the perfect solution using regex and other implementations. I decided to right my own. It is not perfect however worked nice for my case, maybe it does not work properly when you have all your text in Upper case.

function breakTextNicely(text, limit, breakpoints) {

  var parts = text.split(' ');
  var lines = [];
  text = parts[0];
  parts.shift();

  while (parts.length > 0) {
    var newText = `${text} ${parts[0]}`;

    if (newText.length > limit) {
      lines.push(`${text}\n`);
      breakpoints--;

      if (breakpoints === 0) {
        lines.push(parts.join(' '));
        break;
      } else {
      	text = parts[0];
	  }
    } else {
      text = newText;
    }
	  parts.shift();
  }

  if (lines.length === 0) {
    return text;
  } else {
    return lines.join('');
  }
}

var mytext = 'this is my long text that you can break into multiple line sizes';
console.log( breakTextNicely(mytext, 20, 3) );

I had the same issue, I solved it using the below function.

function wordWrap(message, lineSize, breakPoint){
    let wordsArr = message.split(" "),
        wordsLen = wordsArr.length,
        finalMsg = "",
        linesArr = [""],
        currLine = 0;

    for(let i=0; i< wordsLen; i++){
        if(linesArr[currLine].length + wordsArr[i].length > lineSize){
            currLine +=1;
            linesArr[currLine] = wordsArr[i] + " ";
        } else {
            linesArr[currLine] += wordsArr[i] + " ";
        }
    }
    let linesLen = linesArr.length;
    for(let i=0; i<linesLen; i++){
        finalMsg += linesArr[i] + breakPoint;
    }
    return finalMsg.trim();
}

Hope this helps.