当文本对于列表来说太宽时的多行列表项

Question

我有一个 html 列表，它有一定的宽度，用于显示聊天消息。但是当聊天行对于列表来说太宽时，它就会被切断，并且不会显示聊天消息的其余部分。

我想让剩余的字符显示在我列表的下一行，但仍然在同一个 li 元素中，因为我对奇数和偶数列表项使用不同的样式。

希望我说清楚了，感谢您的回复。

HTML:

<div id="top">
    <p id="welcome">Welcome to the lobby!</p>
    <nav>
        <ul id="chatList"></ul>
    </nav>
</div>

CSS:

#chatList {
list-style-type: none;
margin-top: 0px;
margin-bottom: 0px;
padding-left: 0px;
height: 800px;
background: rgb(140, 140, 140);
}

#chatList li {
margin-top: 0px;
height: 20px;
padding-left: 5px;
}

#chatList li:nth-child(odd) {
background: rgb(180, 180, 180); 
}

芝诺

Answer 1

您必须从 #chatlist li

中删除 height

#chatList li {
    margin-top: 0px;
    padding-left: 5px;
}

Fiddle

当文本对于列表来说太宽时的多行列表项

Multi-Line list item when text is to wide for the list

html

css

list

multiline