文本在<div> </div>中重叠

Question

我是从java脚本向<div>插入文本。看似<div>标签宽度和高度已经设置好了。因此，如果我插入大段文字，则<div>与下方的其他<div>重叠。

    $("#formDescription").text($("#Description").val());

HTML

<div class="col-sm-10 col-sm-offset-1" id="box_front_bottom" style="display: none;">
    <div class="panel panel-default">
       <div class="panel-body">
            ---
            ---
             <div class="form-group">
                <div class="col-sm-5" style="overflow: auto">
                    @Html.Label("Description", new { @class = "control-label" })
                </div>
                <div class="col-sm-7" id="formDescription">
                </div>
            </div>

如果我使用较少的文字，它将显示如下

JSFiddle

Answer 1

使用display: inline-block;和max-height

Answer 2

使用引导程序CSS，您使用float:left设置该信息的容器，您可能需要清除浮动以将每个表单保持在单独的行中;用这个：

.form-group:after {
  content: " ";
  display:block;
  clear:both;
}

演示http://jsfiddle.net/Q2FHr/2/