The tag <li> is not allowing enough room for the content to expand as needed

I am trying to create a list using ul li elements. When the content inside the li exceeds the width, a scrollbar appears. However, I am encountering an issue where the li tag does not cover the entire width and spills outside.

.container{
      background: blue;
      padding:20px;
      width:220px;
    }

    ul{
      list-style: none;
      padding: 0;
      margin: 0;
      overflow-x:auto;
    }

    ul li{
      background: white;
      margin-bottom:10px;
      min-width:100%;
    }
<div class="container">
      <ul>
        <li>New york</li>
        <li>Sierra Leone</li>
        <li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet hhoihoihoihoihihihoihoihoihoihoihoihoihoihfhgfdhgddhgd</li>
      </ul>
    </div>
htmlcss

Answer №1

To apply the word-break: break-all property.

.container{
  background: blue;
  padding:20px;
  width:220px;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-x:auto;
}

ul li{
  background: white;
  margin-bottom:10px;
  min-width:100%;
  word-break: break-all;
}
<div class="container">
  <ul>
    <li>New york</li>
    <li>Sierra Leone</li>
    <li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet hhoihoihoihoihihihoihoihoihoihoihoihoihoihfhgfdhgddhgd</li>
  </ul>
</div>

Answer №2

overflow-x:auto; is used to enable scrolling for ul li elements with large content.

.container{
  background: blue;
  padding:20px;
  width:220px;
}

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

ul li{
  background: white;
  margin-bottom:10px;
  min-width:100%;
  overflow-x:auto;
}
<div class="container">
  <ul>
    <li>New york</li>
    <li>Sierra Leone</li>
    <li>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet hhoihoihoihoihihihoihoihoihoihoihoihoihoihfhgfdhgddhgd</li>
  </ul>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generating a dataframe with cells that have a combination of regular and italicized text using the sjPlot package functions

I've been trying to set up a basic data table where the genus name in the "Coral_taxon" column is italicized, but the "spp." part following it remains lowercase. I thought of using the expression() function for each row in "Coral_taxon," but so far, I ...

htmlrdataframesjplotitalic

Replicate the anchor's functionality (opening in a new window when 'ctl' is pressed) when submitting a form

I have a question that may seem unconventional - Is there a graceful method to replicate the functionality of an anchor tag when submitting a form? I want users to be able to hold down the control key while submitting a form and have the result open in a ...

javascripthtmlforms

A table featuring two tbody sections positioned side by side within the table structure, with the thead located at the top

My goal is to design an HTML table layout resembling the following: Left part | Right part | Remove row? ------------------------------------------- 1 [input] [input] Y/N 2 [input] [input] Y/N 3 [input] [inpu ...

htmljquery-uihtml-table

Struggling to grasp the concept of DOM Event Listeners

Hello, I have a question regarding some JavaScript code that I am struggling with. function login() { var lgin = document.getElementById("logIn"); lgin.style.display = "block"; lgin.style.position = "fixed"; lgin.style.width = "100%"; ...

javascripthtmlcssdom

pause in execution between iterations of a for loop

Challenge I'm currently working on a function that processes a list of strings by printing each one on a new line, with CSS animations that gradually display the string over a few seconds. However, I'm struggling to make sure that the next strin ...

javascripthtmlcssarraysinput

Is it possible to eliminate a character from text that lacks html tags or CSS classes using CSS?

I need assistance in removing characters that are not associated with any HTML tag, CSS id or class. Specifically, I want to eliminate the "--" from the provided code snippet below. Can someone please guide me on how to achieve this? <span cl ...

htmlcss

Is it possible for a div to contain more than one class in Twitter Bootstrap?

Is it possible for a div element to have multiple classes assigned to it? I am currently working with Twitter Bootstrap and I would like to utilize two predefined classes. Specifically, I want to apply the active class to a dropdown-toggle within a navig ...

htmlcsstwitter-bootstrap

Creating a primary php file in Apache without the use of SQL or any database: is it possible?

Forgive me if this comes across as rude, but I'm struggling to grasp the concept of apache, PHP, and servers in general. To help myself understand better, I want to create a very basic website that assigns an ephemeral ID to each user (not a session). ...

javascriptphphtmlapache

Learning the process of extracting Fast Fourier Transform (FFT) data from an audio tag within

I am struggling to retrieve the FFT data from an <audio> tag without any syntax errors. After reviewing the Web Audio API documentation, I have written a sample code snippet as follows: <audio id="aud" controls="controls" src="test.mp3"></a ...

htmlaudiofft

Creating a sticky footer using Vue.js for both mobile and desktop display views

Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach. App.vue: <template& ...

htmlcssvue.jsfooter

Ways to update row background color based on specific column values

I need to customize the background color of my table rows based on the value in the "Category" column. For example: Name Category Subcategory A Paid B C Received D If the Category value is 'Paid', I want the ro ...

javascriptcssdatatable

Using jQuery to dynamically swap out <tr> tags and all the elements inside of them

In order to enhance user experience, I am looking to automatically fill in certain form elements within a table when a link is clicked. The intention is for the fields to populate with predefined values and then convert into HTML paragraph elements, preven ...

javascriptjqueryhtml

Determining the Nearest Form to an Element using jQuery

I developed a JavaScript/jQuery script that allows me to check all checkboxes within a form. The function works effectively, but the issue is that it checks all checkboxes on the page regardless of their form wrapper. Here is the function: function toggl ...

javascriptjqueryhtmlcheckbox

Checking for the presence of text within a span tag - a simple guide

see fiddle if there is an already allotted time slot for the patient, change its color to yellow using jquery on the client side. In my example, if I assign a time slot for the first time, it turns green and when assigning another one, the previous slot tu ...

javascriptjqueryhtml

Tips for managing callbacks from a RESTful service API on IOS

Utilizing an API to enable users to register an account on my application. Currently, I have managed to craft the necessary URL in objective-C to submit the data, with the API documentation detailing the return codes that will indicate the outcome. My qu ...

htmlobjective-ciosapisubmit

PHP 7.2 does not allow code to reference previously set sessions

Currently, I am utilizing sessions to transmit either a success or error message to the subsequent site by employing an included PHP file (message.php) to exhibit said message. Unfortunately, for unknown reasons, the message.php file is unable to referenc ...

phphtmlsessionphp-7

Focusing on the initial element of every line within a flex container that spans multiple lines

Looking for a solution to style the first item on each line of a multiline flexbox container with display: flex; flex-wrap: wrap. Preferably seeking a CSS-only approach rather than Javascript iteration. It's uncertain how many items there will be or t ...

cssflexbox

What is the best way to ensure that the content fits within a div with a given max-width set by the parent div?

image description goes here I have a container set to a maximum width of 80%, but when the text inside extends beyond that, the container remains stuck at 80% instead of adjusting its size accordingly. Can anyone provide a solution for this issue? ...

cssstorybook

What is the best method to position a modal in the exact center of the screen?

Is there a way to position the modal at the center of the screen? I have tried implementing this HTML and JavaScript code. Interestingly, it works fine in Chrome console but fails when I try to refresh the page. $('.modal').css('top', ...

javascriptjqueryhtmlcsstwitter-bootstrap

CSS style for centering double digit list items

My query is: <ul id="list"> <li> <a href=''>1</a> </li> <li> <a href=''>2</a> </li> <li> <a href=''>3</a> </li> <l ...

htmlcss