JD. JD. - 6 months ago 10
CSS Question

How to have a horizontally scrollable list with lots of text to wrap?

Have a look at this : fiddle on horizontal scroll

What I want is to put a lot of text in a fixed size container and have the text wrap. When I change the text in the fiddle to contain a lot of text it does not wrap and goes over other items.

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


So what I want is a list of divs which contain a lot of text (say div is 200 by 200) and there should be a horizontal scroll to access other items in the list.

Is there a way to do this with this fiddle or with any way?

Answer

You can do this;

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

This will allow your text to wrap inside the LI and have a scroll on the UL

See Fiddle

EDIT -

Updated Fiddle