管理表单组中元素的溢出

Question

我正在使用JQuery将带有文本的span元素添加到div中。当文本太大并且添加了许多元素时，元素会溢出并超出面板宽度。如何防止这种情况发生，因此元素会突破到下一行？如果面板宽度发生变化（窗口调整大小），他们也可以重新排序。

HTML

<div class="form-group col-xs-12 col-md-12">
   <label class="control-label "></label>
   <div class="form group" id="selected_demographics">              
   </div>
</div>

JQ

var $spanTitle = $('<span class="input-group-addon demographic-title">').text(demographic);
var $btnDeleteMap = $('<button class="btn btn-xs delete-demographic" type="button">X</button>');
$spanTitle.append($btnDeleteMap);

$('span.demographic-title:last').after($spanTitle);

假设已经添加了第一个spanTitle，它会向右溢出。

Answer 1

在CSS样式中使用：

div {
  word-break:break-word
}