Javascript 展开具有新行的文本的输入组标签

我正在使用Bootstrap构建一个输入组——它是一个带有下拉列表和只读标签的按钮。当你点击按钮时，我用一些文字填充标签。问题是，如果文本包含换行符，则输入组不会展开以适应，文本只是呈现在顶部

我已经创建了一个复制问题的程序-只需单击按钮即可设置文本和即时疼痛

下面是我复制HTML和JS的过程：

<div class="input-group">
    <div class="input-group-btn">
          <button type="button" class="btn btn-default" id="compile" onclick="compile()">Compile</button>
          <button type="button" class="btn btn-default dropdown-toggle" id="selector" data-toggle="dropdown">
              <span class="caret"></span>
              <span class="sr-only">Toggle Dropdown</span>
          </button>
          <ul class="dropdown-menu" role="menu">
               <li><a href="#" onclick="init()">Example</a></li>
          </ul>
    </div>
    <label class="form-control" id="result"></label>            
</div>

function escapeRegExp(string) {
    return string.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
}
function replaceAll(find, replace, str) {
    return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
}
function escapeHTML( string )
{
    var pre = document.createElement('pre');
    var text = document.createTextNode( string );
    pre.appendChild(text);
    return pre.innerHTML;
}
function addtext() {
    var response = "Some\nText"
    response = response.trim()
    response = escapeHTML(response)
    response = replaceAll("\n", "</br>", response)
    document.getElementById('result').innerHTML = response;    
}

如何使引导调整标签字段的大小最好达到某个最大值w/滚动条，以获得更大的文本输出

---

我已经成功地用textarea替换了标签，它展示了所有所需的语义，但是Bootstrap并不正式支持带有textarea的按钮插件，这一点在这种构造的糟糕样式中很明显。

问题是classed.form control标签的高度为34px。它将保持这样的规模。如果将其设置为“高度：自动”，则当内容大于34px时，它将展开

---

当然，这会打乱界面其他部分的布局。你需要东拉西扯来缓解它。示例：

只是为了确保，此解决方案不涉及带滚动条的限制情况，对吗？不，但如果需要，可以使用overflow:scroll on.form控件。高度：自动，但它会向下推它下面的任何东西！