CSS - how to trim text output?

Question

I have an arbitrary amount of text that will be displayed in a confined space.

How can I trim the output so that whatever is "beyond" the box is not displayed, or how can I force the box to create a vertical scroll bar?

Answer 1

For HTML:

<div id="smallBoxWithLotsOfText">There is way more text in here than what
    I have typed.  I mean, this text is long.  There is lots of it.  
    You can't even imagine how long this text is gonna get.  No joking.  
    It's long; it's very, very long.  It keeps going, and going, and going. 
    It's the Energizer Bunny of text.  Like, seriously dude.  It's crazy.  
    Absolutely crazy.
</div>

Try CSS:

#smallBoxWithLotsOfText {
    width: 100%;
    height: 100px;
    overflow: auto;
}

The height property tells the box how high to be. The overflow property tells the box to add a scroll bar when the contents get bigger, but not to always have a scrollbar (like scroll does).

You can see this in action.

Answer 2

usually 'overflow: auto' should work if there is a set height/width. You can force a scroll bar with 'overflow: scroll'. You can hide anything with 'overflow: hidden;'

The key to overflow with CSS styles is the height and width have to be determined by the browser in order for it to know when to start overflowing.