What's the best way to display text / content if the container has a size limit?

Question

We have a page in our website that has a container with a static width and height (e.g. 500px x 500px). We are intending to keep the content inside short (to make it fit the size of the box).

But in the instance that the text would really exceed the size of this container, what is the best approach?

a) Have a "Read More" button then a modal box of the completed content. (However, that page is supposed to be the "read more" page already. Too nested, I feel.)

b) Have a div inside the container that is scrollable.

c) Have a pagination.

d) Expand the content box but make it overlap / float above (like a dropdown menu) so that the main container doesn't need to expand.

e) Others?

Answer 1

Best option from your post

(d) seems to be the best one. One drawback of (d) is that the user can ultimately see only as much as the screen allows. In case of very long text, the exapnded content box may not fit in screen.

My suggestion

Let the text scroll slowly when mouse pointer hovers over content box. The scrolling speed should be slow enough so that users can read comfortably. The effect is like the information screens often found at airports, showing flight arrival and departure information.

An Working example can be seen on deviantart.com, they do this for "literature" posts. See the attached images for clarification. The first image is a post that shows partial content of a 'literature'. The text inside the box starts scrolling when pointer hovers over it. The text scrolls all the way to the bottom, then stops there. On mouse out its scrolled back to origin.

Answer 2

I would use an expanding area, like an accordion.

Other viable options to me are a scrollable container and overlapping area (maybe it's the same as what I've suggested).

Nested option — no, too many clicks. Pagination — no, for the same reason. Also, pagination in the small areas looks weird. And you will have to decide how much content goes into one page, and there will be cases with so called widows and orphans (typography terms) — where user clicks the second page only to find one word or one line of text there. It can be very annoying.

Answer 3

This really depends on what kind of information it is and how much more longer its likely to be, also what are the other ui elements and information around it and will they be needed to be visually next to this if say, you decide to use pagination.

Answer 4

I think that the best way is use the option d, a kind of accordion where you can find all the information in the same page, now you must look if the design is coherent with this...