javascript - 我怎样才能 "word wrap"容器 div 中的 div？

Question

我正在制作一个逗号分隔的“标签”类型系统，我希望标签从左到右滚动，然后如果下一个标签会导致该行比容器的最大宽度更宽，则转到下一行.

如果我使用 <span>，我会得到不同的结果或 <div>

<span class="tag"><span class="tagspan" ></span></span>

<div class="tag"><span class="tagspan" ></span></div>

但都没有正确换行到下一行。 (如果我使用 span 它会换行到下一行，但它会将标签分成两半并将其余部分放在下一行)。

肯定有一个简单的解决方法。我试图避免必须计算每条线的宽度并将其当前宽度与添加下一个标签时的宽度进行比较，然后决定是否需要换行。

如有任何建议，我们将不胜感激。

JS Bin Here

jQuery:

$('document').ready( function() {
var value;  
var tag;
var cloned;
$('#tag').on( 'change keyup', function(){
value = $('#tag').val();
tag = value.split(',');
if (tag[1] != null && tag[0] !== ''){
cloned = $('.tag').first().clone().appendTo('#container');
  $(cloned).find('span').html(tag[0]);
  $(cloned).css({'opacity' : '1', 'width' : $(cloned).find('span').width() + 'px'}); 
  $('#tag').val('');

}
  if (tag[1] != null && tag[0] === ''){
  $('#tag').val('');
}

    console.log($('.tagspan').width() + 'px');
});


});

Answer 1

您可以在标签元素而不是容器中使用 float:left 并删除 display:inline-flex 属性，如果您的标签到达行尾，该属性会导致换行。编辑:将外部 span 元素更改为 div 以获得该效果。

//谢谢加里 ;)