html - 如何拥有一个包含大量文本的水平滚动列表？

Question

看看这个:fiddle on horizontal scroll

我想要的是将大量文本放在一个固定大小的容器中并让文本换行。当我将 fiddle 中的文本更改为包含大量文本时，它不会换行并覆盖其他元素。

<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 列表(比如 div 是 200 x 200)并且应该有一个水平滚动条来访问列表中的其他元素。

有没有办法用这个 fiddle 或任何方式做到这一点？

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