CODEWITHSUNDEEP
htmlcss
Loolooii
Loolooii

Reputation: 9162

How to wrap text in li to be as long as the width of ul?

I want each text in each <li> to have the same width as the width of the <ul>. But somehow it doesn't work, the text just keeps going and going... I read somewhere on here that giving <ul> a width will solve the problem, but it doesn't work in my case. This is my HTML:

<div id="chat-wrapper" style="display:none;">
<div id="main-content">
    <div id="user-list-wrapper">
        <b>USERS</b>

        <ul id="user-list">
        </ul>

    </div>

        <div id="messages-main">
            <ul id="messages"></ul>
        </div>
<input id="message-input" placeholder="Your message here!" autofocus="autofocus"/>
<input type="button" id="datasend" value="send"/>
 </div>

And this is my CSS:

#user-list-wrapper {
    float:left;
    width:100px;
    border-right:1px solid black;
    height:300px;
    overflow:scroll-y;
}

#login-wrapper {
    margin-left:auto;
    margin-right:auto;
    width:50%;
}

#messages-main {
    height:320px; 
    width:950px; 
    overflow:none;
    float:left;
    margin-left:20px;
}
#message-input {
    width:500px; 
    outline:none; 
    height:100px;
    margin-left:300px;
    line-height:100px;
}
#datasend{
}
#main-content {
    width:100%;
    height: 350px;
}
#messages {
    list-style-type:none;
    margin:0;
    width:900px;
}
#messages li {
    width:100%;
    padding:3px;
    border-bottom:1px solid #CCC;
}
#user-list {
    padding:0;
}
#user-list li{
    padding:3px;
    list-style:none;
    border-bottom:1px solid #CCC;
}

But this doesn't work for me. What do I have to do to achieve what I want in my case? Thanks.

UPDATE: I added the exact code I have.

UPDATE 2: The text exceeds also #main-content. So it's not only the <ul>

Upvotes: 6

Views: 33457

Answers (4)

AlexanderYao
AlexanderYao

Reputation: 1

you have to add 3 css properties to li to make it:

li {
    overflow:hidden; 
    white-space:no-wrap; 
    text-overflow:ellipsis;
}

but list-style-type will disapprear with option "overflow:hidden", and i have no idea how to get it apprear.

Upvotes: 0

R&#244;mulo Gomes
R&#244;mulo Gomes

Reputation: 1

You can put "width: inherit" for li and set a width for ul

Upvotes: 0

Brian
Brian

Reputation: 2229

If you are using css3 you can try adding

word-wrap: break-word;

to the li css

Upvotes: 10

zen
zen

Reputation: 1165

You need to put 100% for li element. Here's an example, http://jsfiddle.net/HQPGS/

Upvotes: 4

Related Questions