What is the best way to create a horizontally scrolling list with lengthy text that needs to wrap?

Question

What is the best way to create a horizontally scrolling list with lengthy text that needs to wrap?

Take a look at this : example of horizontal scroll

I'm looking to place a large amount of text in a fixed-size container and have it wrap properly. However, when I try adding lengthy text in the fiddle, it overflows instead of wrapping around.

<div class="DocumentList">
<ul class="list-inline">
    <li class="DocumentItem">
        <span>Insert lots of text here and it spills over instead of wrapping</span>
    </li>
    ... // Additional list items here
</ul>
</div>

What I envision is a series of divs with extensive text content (e.g., 200 by 200 dimensions) that require horizontal scrolling to view all items in the list.

Can anyone provide guidance on achieving this using the provided fiddle or any alternative method?

html css

Answer 1

Answer №1

Try implementing the following CSS code:

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

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

By using this code, your text will wrap inside the LI element and the UL will have a scroll.

For reference, check out this JSFiddle link

UPDATE -

View the modified version on JSFiddle

Answer 2

Try implementing the following CSS code:

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

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

By using this code, your text will wrap inside the LI element and the UL will have a scroll.

For reference, check out this JSFiddle link

UPDATE -

View the modified version on JSFiddle

What is the best way to create a horizontally scrolling list with lengthy text that needs to wrap?

Answer №1

Similar questions

The scroll-to-top arrow remains concealed when the height of the html and body elements is set to 100

What is the procedure for inserting comments into inline CSS?

Is it possible to identify horizontal scrolling without causing a reflow in the browser?

Is there a reason for specifying a CSS parameter twice, with an asterisk on the second declaration?

CSS has no effect

The sticky footer is functional on every page except for one

Design a collection of image icons to use as a toolbar in a web

Encountered an error while attempting to access the .text attribute of a pre-existing <a> element: NoneType error

Inability to activate hyperlink to a new page when utilizing a passed variable

Is there a way to append the current path to a link that leads to another URL?

The data-offset attribute in Bootstrap Scrollspy seems to have no effect on the offset

Activate the Chrome Extension that allows you to open a link in a new tab with just a middle click or regular click, without closing the popup

Ways to identify and differentiate various checkboxes using HTML and CSS

Is browser rendering performance affected by wrapping everything in a div?

Using Multiple SCSS Files to Reference a Centralized Style Sheet

Angular silhouette casting on CSS fold

Is it possible to create a dropdown like this using CSS?

Using CSS to automatically convert a table into one column layout with labels from the thead section

Props and theme merge to create uniquely designed styled components with a thematic twist

Extract the URL from the query parameters and inject it into a div element