<li> 没有为内容的增长腾出空间

Question

我尝试创建一个ul-li列表。当li中的内容较多时，会出现滚动。但我面临的一个问题是li标签没有覆盖整个宽度。它在外面

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

Answer 1

您可以使用word-break: break-all

.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;将ul li设置为启用滚动，在li中有大量内容。

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