Marquee - line breaking into two instead of a single line - css

Problem

My div css looks like

#another_div
{
    white-space:pre-wrap;
    font-size:1.5em;
    position:fixed;
    height:6%;
    display:block;
    background:#FFF;
    width:100%;
    text-align:center;
    top:30%;
    padding-top:1%;
    -webkit-marquee: auto medium infinite scroll normal;   
    overflow-x: -webkit-marquee;


}

In this div I am loading some dynamic content coming from some page. It's showing like

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

                         BBBBBBBBBB

But I want it as

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABBBBBBBBBBBBBB

I already tried the "white-space": "nowrap". Didn't work.

It's a marquee so it should be floating in a single line. Why is it breaking?? I checked the line. There is no line breaking tag. How can I make it marquee in a single line?

Problem courtesy of: AtanuCSE

Solution

white-space: nowrap; should work. Check the demo below

DEMO

Solution courtesy of: Sowmya

Discussion

white-space: pre; will take out all your breaks!

Discussion courtesy of: Andrew Lazarus

This recipe can be found in it's original form on Stack Over Flow.