Question

I am adding new span elements to a div element (using .append) of fixed size. When I add many elements the ‘div’ overflows with a scroll bar. Is it possible to prevent this and wrap all the elements inside the div to display in a tabular format?

A sample of what I am trying is at http://jsfiddle.net/Hj3Qe/2/

Answer 1

Try:

#x{
    word-wrap:break-word;
}​

jsFiddle example.

This will keep the spans within the div’s width, although I’m not sure what you’re looking for with a tabular format without using tables. For that you may want to add the CSS rule of display:inline-block; to your spans, adjusting the width as needed.

jsFiddle example #2.

span {
    width:20px;
    display:inline-block;
}