In HTML a very long text is not automatically wrapped. Especially if there are no spaces in your string your browser doesn’t necessarily know where it should break the line.
In most cases you don’t want the people use the horizontal scrollbar to read the entire text but CSS allows you to force the browser to show all the text in multiple lines. CSS offers the properties white-space and word-wrap for this purpose.
div {
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Firefox */
white-space: -pre-wrap; /* Opera white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word;
}
After applying the above rules on your text containers the result looks as desired.
Different browsers don’t handle long text the same way. In firefox the long text got already wrapped without the CSS rules applied. It was able to detect special characters that were url-encoded and broke the lines on these positions.
Nonetheless you should never rely on this automatic detection but teach every browser that you really want to wrap so that you get the same result everywhere.