Hide text going beyond DIV element

Question

I have a DIV element with fixed width having some text which doesn't have any spaces for HTML parser to automatically break into multiple lines. The text is going beyond the limit of the DIV and messing out the pgae:

1. Is there anyway to make text going beyond the boundary invisible?
2. Is it possible to break it into multiple lines, or -even better- break into multiple lines with a hypen at the end of each broken line?

Regards,
Rafid

Answer 1

You can do this with CSS.

Is there anyway to make text going beyond the boundary invisible?

Yep: overflow

#yourDivId {
    overflow: hidden;
}

Is it possible to break it into multiple lines

Yep: word-wrap

#yourDivId {
    word-wrap: break-word;
}

Answer 2

The answer to your first question is to use the following style:

overflow: hidden;

Alternatively, if you want to be able to scroll in the div to see the content you can do

overflow: auto;

or

overflow: scroll;

To do what you ask in your second question you'd need some javascript.