Html 如何将 li 中的文本包装成与 ul 的宽度一样长？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11960362/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to wrap text in li to be as long as the width of ul?
提问by Loolooii
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:
我希望每个文本中的每个文本<li>的宽度与<ul>. 但不知何故它不起作用，文本只是不断地前进......我在这里的某个地方读到给出<ul>宽度可以解决问题，但在我的情况下它不起作用。这是我的 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:
这是我的 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>
更新 2：文本也超过#main-content. 所以这不仅是<ul>
回答by Brian
If you are using css3 you can try adding
如果您使用的是 css3，您可以尝试添加
word-wrap: break-word;
to the li css
到 li css
回答by zen
You need to put 100% for li element. Here's an example, http://jsfiddle.net/HQPGS/
您需要为 li 元素放置 100%。这是一个例子，http://jsfiddle.net/HQPGS/
回答by R?mulo Gomes
You can put "width: inherit" for li and set a width for ul
您可以为 li 设置“宽度：继承”并为 ul 设置宽度
回答by AlexanderYao
you have to add 3 css properties to li to make it:
您必须向 li 添加 3 个 css 属性才能使其：
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.
但是列表样式类型会随着选项“溢出：隐藏”而消失，我不知道如何让它出现。
