如何使用大量文本進行水平滾動列表換行？

Question

看一看這個：fiddle on horizontal scroll

我想要的是把大量的文本放在一個固定大小的容器中，並有文本換行。當我將小提琴中的文本更改爲包含大量文本時，它不會進行換行並覆蓋其他項目。

<div class="DocumentList"> 
<ul class="list-inline"> 
    <li class="DocumentItem"> 
     <span>Put lots of text here and it goes over the other items instead of wrapping</span> 
    </li> 
    <li class="DocumentItem"> 
     <span>Test Data1</span> 
    </li> 
    <li class="DocumentItem"> 
     <span>Test Data1</span> 
    </li> 
    <li class="DocumentItem"> 
     <span>Test Data1</span> 
    </li> 
    <li class="DocumentItem"> 
     <span>Test Data1</span> 
    </li> 
    <li class="DocumentItem"> 
     <span>Test Data1</span> 
    </li> 
    <li class="DocumentItem"> 
     <span>Test Data1</span> 
    </li> 
    <li class="DocumentItem"> 
     <span>Test Data1</span> 
    </li> 
    <li class="DocumentItem"> 
     <span>Test Data1</span> 
    </li> 
</ul> 
</div> 

所以，我要的是它含有大量的文字（比如DIV是200 200），並且應該有一個水平滾動訪問列表中的其他物品申報單的列表。

有沒有辦法用這個小提琴或以任何方式做到這一點？

Answer 1

你可以這樣做;

.DocumentList { 
    overflow-x:scroll; 
    overflow-y:hidden; 
    height:200px; 
    width:100%; 
    padding: 0 15px; 
    white-space: nowrap; // nowrap here 
} 

.DocumentItem { 
    border:1px solid black; 
    padding:0; 
    height:200px; 
    display: inline-block; // inline block 
    width: 200px; // set width here 
    white-space: normal; // wrap whitespace here 
    vertical-align: top; // align elements to the top 
} 

這將使你的文字來包裝LI內，對UL

滾動見Fiddle

編輯 -

更新Fiddle