I have a script that takes an input string from a user with variable length, typically ~ 400-3000 letters. My script does some modification to the string, and then should print it to the screen. Using document write, everything appears on one line. However, I want to have ~ 100 letters for each output line, so the user won't have to scroll ~ 3000 letters to the right to see the whole text.

The only way I could imagine to do this would be a for loop, but maybe someone know a better solution?

Edit:

This is the for loop I am currently using to achieve this

document.write("<p>",">Position: ", (lower+1) + "-" + (lower +print_screen.length), "<br/>");

// print only 70 chars per line
for(i = 0; i < print_screen.length; i += 69){
    document.write(print_screen.substring(i, i+69), "<br/>");
};

document.write("</p>");

I have a script that takes an input string from a user with variable length, typically ~ 400-3000 letters. My script does some modification to the string, and then should print it to the screen. Using document write, everything appears on one line. However, I want to have ~ 100 letters for each output line, so the user won't have to scroll ~ 3000 letters to the right to see the whole text.

The only way I could imagine to do this would be a for loop, but maybe someone know a better solution?

Edit:

This is the for loop I am currently using to achieve this

document.write("<p>",">Position: ", (lower+1) + "-" + (lower +print_screen.length), "<br/>");

// print only 70 chars per line
for(i = 0; i < print_screen.length; i += 69){
    document.write(print_screen.substring(i, i+69), "<br/>");
};

document.write("</p>");

• javascript

• try using css white-space: pre-wrap – Salman Commented Jan 27, 2013 at 14:16
• this thread may help stackoverflow./questions/1155678/… – Deepak Kamat Commented Jan 27, 2013 at 14:22

2 Answers 2

You can add breaks in the string using replace and a regular expression. This adds a break at every 100th character:

document.write(theText.replace(/(.{100})/g, '$1<br/>'));

Use this CSS for your container:

.longtext {
    white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    white-space: pre-wrap;       /* css-3 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    word-break: break-all;
    white-space: normal;
}