Question

我想要的是将大量文本放在固定大小的容器中并进行文本换行。当我改变小提琴中的文字以包含大量文本时，它不会换行并覆盖其他项目。

<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乘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

如何使用包含大量文本的水平滚动列表？

1 个答案: