Question

我已经尝试了大量的代码，我无法让我的文字转到新的一行。这是JS小提琴演示：http://jsfiddle.net/SfG8r/1/

基本上我希望当文本超出框时，文本会进入一个新行（就像书中的一个段落一样）。

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

Answer 1

问题解决了！这是我的代码：我已将此代码添加到包含文本

的div中

CSS：

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

当文本溢出div时，将文本放在新行上

1 个答案: