Search code examples
htmlcsslistmultiline

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

I have an html list with a certain width, that is used for displaying chat messages. But when the chat line is to wide for the list, it just gets cut off, and doesn't show the rest of the chat message.

I want to get the remaining characters to be displayed on a next line in my list, but still in the same li element, as I use different styles for odd and even list items.

I hope I made myself clear, and thanks for the response.

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); 
}

Zeno

Solution

  • You must remove the height from #chatlist li

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

    Fiddle