Geek Answers Handbook

How to wrap text in li until the width is ul?

I want each text in each <li> have the same width as the width of <ul> . But for some reason this does not work, the text just goes on and on ... I read somewhere here that providing a <ul> width will solve the problem, but in my case it will not work. 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 does not work for me. What should I do to achieve what I want in my case? Thanks.

UPDATE: I added the exact code that I have.

UPDATE 2: the text is also superior to #main-content . So this is not only <ul>

+4
source share
4 answers

If you are using css3 you can try adding

 word-wrap: break-word;

for li css

+9
source

You need to supply 100% for the li element. Here is an example, http://jsfiddle.net/HQPGS/

+3
source

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

0
source

you need to add 3 css properties in li to do this:

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

but the list-style type will fade with the "overflow: hidden" option, and I don't know how to get its apprear.

0
source

More articles:


All Articles