css - 将文本包裹在 div 内而不是展开它

Question

注意:我的 div 有自动宽度，我想保持这种状态。我认为如果我以某种方式弄清楚如何使用 CSS 给它一个等于当前(自动)宽度的最大宽度，我的问题就会得到解决，但我还没有找到任何东西。

问题: (忽略背景文本，显示消息的 div 是透明的。)

断线所需的宽度:

这是我的 CSS:

div.chat div#chatOutput {
   height: 370px;
   margin-bottom: 5px;
   max-height: 450px;
   min-height: 130px;
   border: 1px solid;
   overflow-y: scroll;
   padding: 5px;
}

还有我的 HTML:

<div class="chat">
            <h4><a title="Click to copy channel link" href="#">#</a> <span id="chatChannelName">General</span></h4>
            <div id="chatOutput"></div>
            <br />
            <div class="chat-group">
                <input type="text" maxlength="80" class="form-control" id="chatInput" placeholder="Type your message.." />
                <button class="btn btn-primary" id="chatSend"><i style="float: none;" class="fa fa-send"></i> Send</button>
            </div>
        </div>

Answer 1

尝试溢出:

一些属性:
可见 |隐藏 |滚动|汽车 |继承