在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

尝试在当前div周围添加另一个div并为其指定固定宽度。这应该可以防止内部div变得比外部div更大。 这是一个例子：

HTML：

<div class="fixed">
    <div class="autosize">
        <p>Hello World</p>
    </div>
</div>

CSS：

.fixed {
    width: 400px;
}

.autosize {
    /* Your own autosize-code */
}

Answer 2

尝试overflow:

一些属性：
visible | hidden | scroll | auto | inherit