document.write text over multiple lines

Question

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

this thread may help http://stackoverflow.com/questions/1155678/javascript-string-newline-character — Deepak Kamat, Jan 27 '13 at 14:22

score 3 · Answer 1 · answered Jan 27 '13 at 14:18

3

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

answered Jan 27 '13 at 14:18

ATOzTOA

34,814
22
96
117

Thanks for the quick response. I suppose I have to include all of those lines in my code? And what about Safari? – Jan 27 '13 at 14:47
@bluewoodtree Yes, you better add all if you need it to work on all. Safari supports CSS3, so already in the list. – ATOzTOA Jan 27 '13 at 14:49

score 3 · Accepted Answer · answered Jan 27 '13 at 14:33

3

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

answered Jan 27 '13 at 14:33

Guffa

687,336
108
737
1,005

This looks much more elegant than my for loop, thanks a lot! – Jan 27 '13 at 14:48

document.write text over multiple lines

2 Answers2