Question

我希望每个<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>

这是我的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;
}

但这对我不起作用。在我的情况下，我需要做些什么来实现我想要的？感谢。

更新：我添加了我的确切代码。

更新2：文字也超过了#main-content。所以这不仅仅是<ul>

Answer 1

如果您使用的是css3，可以尝试添加

word-wrap: break-word;

到li css

Answer 2

您需要为li元素添加100％。这是一个例子，http://jsfiddle.net/HQPGS/

Answer 3

您可以为li设置“width：inherit”并为ul

设置宽度

Answer 4

你必须向li添加3个css属性才能实现：

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

但是list-style-type将不会选项＆＃34;溢出：隐藏＆＃34;，我不知道如何让它变得简单。

如何在li中包含文本只要ul的宽度？

4 个答案: