jquery - 两列中的一个列表项 - 长字符串导致间隙的问题，CSS

Question

我有一个列表项，我想让列表分成两列。

我已经完成了这项工作，但是当其中一个 li 中有一长串文本时，它会导致另一列出现间隙

我在这里有一个演示：http: //jsfiddle.net/q7ryE/

当有很长的文本字符串时，如何避免这种情况，所以所有内容都适合两列中没有间隙/空格的漂亮列表视图？

<div class="container">
    <ul class="list removedArea">
        <li><span>more text here</span></li>
        <li><span>more text here</span></li>
        <li><span>more text here</span></li>

    <!-- Long string causes gap pushing the li down on opposite site -->

       <li><span class="fl">this is a very long name which will overlap and cause a gap, i need to reduce this gap when there is a long string of text</span>
       </li>

       <li><span>more text here</span></li>
   </ul>
</div>

Answer 1

您可以以适当的方式使用溢出，这样可以避免空格..

修改后的 CSS

 .list.removedArea li {
    display: block;
    width: 45%;
    float: left;
    border-bottom: 1px dashed #ddd;
    border-top: none;
    border-left: 1px solid #CFCFCF;
    border-right: 1px solid #CFCFCF;
    color: #222;
    margin: 3px 3px 3px 0;
    padding: 5px;
    height: 70px;
    font-size: 14px;
    overflow-x: hidden; // added
    overflow-y: scroll; // added
    text-align: left;
    background-color: #fff;
    margin: 0 5px 0 10px;
    border-radius: 0;
    cursor: pointer;
    }

看一下这个