Question

我的网站上有一个聊天项目，但出于某种原因，当我输入聊天时，它会运行页面（宽度到无穷大）而不是打破新行。理想情况下，聊天应停在显示时间的地方，并在那里闯入新线。我怎样才能解决这个问题？谢谢！

.chat-add {
position: relative;
top: 0px;
margin: 10px;
}

.chat-add > input[type="text"] {
padding: 0 65px 0 10px !important;
}

.chat-container {
position: absolute;
float: right;
width: 300px;
top: 0px;
bottom: 0px;
right: 0px;
}

.chat {
position: absolute;
bottom: 320px;
top: 57px;
margin: 0 10px 10px 10px;
}

.chat-output {
position: relative;
padding: 5px;
margin-bottom: 5px;
overflow: auto;
background-color: white;
height: 100%;
/* background: url(../images/chat-background.png) no-repeat; */
/* border: 2px solid #3B5998; */
/* border-radius: 5px; */
/* -moz-border-radius: 5px;*/
/* -webkit-border-radius: 5px; */
}

.chat-message {
position: relative;
display: table;
float: left;
margin-bottom: 4px;
width: 100%;
border-style: solid;
border-bottom-width: 1px;
background-color: rgba(255, 255, 255, 0) !important;
}



.chat-user-message {
position: relative;
float: left;
width: 220px;
min-height: 16px;
padding: 4px;
margin-left: 32px;
font: 12px sans-serif;
display: table-cell;
}

.chat-time {
font-size: 10px;
position: absolute;
top: 0px;
right: 0px;
width: 45px;
text-align: right;
}

Answer 1

如果您愿意使用CSS3，则可以使用自动换行属性。这可能会非常有用，因为它描述了您所指出的问题以及解决方案：http://www.w3schools.com/css/css3_text_effects.asp

另一个可能有用的是在CSS3之前工作的这个：
http://www.w3schools.com/css/tryit.asp?filename=trycss_pos_overflow_auto

和这个

http://www.w3schools.com/css/css_positioning.asp

输入聊天错误（css）

1 个答案: