css 鼠标移入增加背景色显示不全

Question

问题描述

css 鼠标移入li增加背景色，鼠标移入后li背景色怎么占一行显示，现在只显示到父级的宽度

<div class="box">
    <ul>
        <li>fanchaodingfanchaodingding</li>
        <li>fanchaodingfanchaodingfanchaodingfanchaoding</li>
        <li>fanchaoding</li>
        <li>fanchaodingfanchaodingfanchaodingfanchaoding</li>
        <li>fanchaodingfanchaodingfanchaodingfanchaoding</li>
        <li>fanchaodingfanchaodingfanchaoding</li>
    </ul>
</div>
<style>
    *{margin:0;padding:0;}
    li{list-style: none;}
    .box{width: 200px;background-color: #ddd;margin:100px auto;overflow: hidden;}
    ul{min-width:100%;overflow:auto;}
    li:hover{background-color: red;}
</style>

Answer 1

这里涉及到两块儿知识：

1. 之所以看着不会整行标红，显然是文本超出了现有li的宽度，你给li设置overflow-x: scroll;，自然会整行显示，但是不建议这么做。毕竟丑。
2. 你所输入的连续字母，浏览器会认为这是同一个单词，所以它会尽可能单行展示，导致文本过长却不换行的情况。所以，给li设置word-break: break-all;，同样可以解决问题。

Answer 2

给li加个float:left就好了啊

Answer 3

ul{min-width:max-content}