CODEWITHSUNDEEP
javascriptjqueryhtmlcssjsfiddle
fudgematico
fudgematico

Reputation: 41

Put text on a new line when it overflows out of the div

I have tried loads of code put I can't get my text to go onto a new line. Here is the JS Fiddle Demo: http://jsfiddle.net/SfG8r/1/

Basically I want the text to go onto a new line (Just like a paragraph in a book) when it goes outside of the box.

HTML:

<div class='all1'>
<ol class='fs1' id='hide'>
    <li><p>Fs1</p></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
    <li><a href="">TEST</a></li>
</ol>

CSS:

.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;}

Upvotes: 0

Views: 114

Answers (1)

fudgematico
fudgematico

Reputation: 41

Problem Solved! Here is my code: I have added this code to the div containing the text

CSS: 

-moz-column-count:1; -webkit-column-count:1; column-count:1; -moz-column-gap:30px; -webkit-column-gap:30px; column-gap:30px;

Upvotes: 1

Related Questions