Question

I have a problem with overflow. I have a div that set to be overflow: hidden, and all the elements within it was set to position absolute. The elements itself is a span tag that contains text and a image tag. I have an arrow to control the span tag forward or backward within the div. Everything is fine but when I move the span tag towards the end of the div tag where part of it outside the div. The image within the span tag was word-wrap to a new row rather staying the same line of the text.

Do anyone know why is like, it is work fine if the span tag fully within the div?

Answer 1

To prevent text from breaking to a new line, use the following CSS definition:

elementstyle {
    white-space:nowrap;
}

Then, to make the image float next to the text, use this:

elementstyle img {
    display:inline;
}