I have been struggling to make my text wrap onto a new line within the box. You can view the JS Fiddle Demo here: http://jsfiddle.net/SfG8r/1/
Essentially, I want the text to wrap onto a new line like a paragraph in a book when it exceeds the box boundaries.
Here is the HTML code snippet:
<div class='all1'>
<ol class='fs1' id='hide'>
<!-- List of 20 items with TEST links -->
</ol>
And this is the corresponding CSS code:
.wrap .all1 {text-decoration: none; list-style: none; position: absolute; top: 2em; left: 9em; z-index: 600;}
.wrap #hide {display: block; text-decoration: none; list-style: none; font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #222;}
.wrap #hide a {display: block; text-decoration: none; list-style: none; color: #06C; font-weight: bold; font-size: 13px; display: table-cell; height: 20px; text-align: center; vertical-align: middle;}