how to keep the words always remain at its position on its current line in different browsers, and when zooming?

Question

I made a simple DIV with justified text like this

jsfiddle

I want to keep content inside the DIV unchanged when I open it in different browsers, the number of characters in any line must be the same in different browsers, and when i zoom it in/out.

but the problem is the text in DIV is always rearranged (few characters are felt down to the next line) when I view it in different browsers like Chrome, IE, Firefox.. especially when i zoom it in or out.

for example, i have a DIV in chrome like that

AAA BBBB CCC DDDDD

EEEEE FF GGGGG HHH

but in FireFox or when i zoom, it turns to

AAA BBBB CCC DDDD

DEEEEE FF GGGGG H

HH

how to keep this identical in all browsers? Any help will be much appreciated!

Answer 1

If you set the width of the div in ems then the width will be relative to the font-size. That should allow the div to stay relatively the same size when you zoom across browsers.

http://jsfiddle.net/hz2BE/6/

CSS

#text1{
    text-align:justify;
    text-justify:inter-word;
    width: 20em;
}