Question

我正在用逗号分隔＆＃34;标记＆＃34;类型系统，我希望标签从左向右滚动，然后转到下一行，如果下一个标签将导致该行宽于容器的最大宽度。

如果我使用<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。

//感谢加里;）

Answer 2

这与CSS样式比JavaScript代码更相关，我想我只是在您的CSS代码中调整了两个类：

span {
  vertical-align:middle;
  display: inline-flex;
  word-break: keep-all;
}
#container {
  text-align: left;
  display: block;
  min-width:400px;
  max-width:400px;
  height:100px;
  border:1px solid;
}

这就是它的样子：

enter image description here

问题是，span元素必须适合其父元素，这就是为什么你应该让子元素显示内联而不是它的父元素。

工作示例：Wrap span tags into DIV

Answer 3

鉴于您正在使用flexbox，您可能想尝试添加到.container类flex-wrap：wrap;这会产生类似的效果。

Answer 4

有一些样式会给您带来问题（引用您发布的JSBin）。以下内容应解决您的问题：

.tag {
    border: 3px ridge #336699;
    height: 20px;
    background: rgba(0, 0, 170, .25);
    border-radius: 20px;
    text-align: center;
    font-family: arial;
    font-size: 15px;
    color: #336699;
    font-weight: bold;
    padding: 2px 8px;
    margin: 2px;
    opacity: 0.0001;
    float: left;
    display: none;
}

#container {
    width: 400px;
    height: 100px;
    border: 1px solid;
}

然后将您的JavaScript调整为以下内容：

$(function() {
    var value, 
        tag,
        cloned;

    $('#tag').on('change keyup', function(e) {        
        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', 'min-width' : $(cloned).find('span').width() + 'px', 'display': 'inline-block'}); 
            $('#tag').val('');
        }

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

我已经发布了一个正常运作的JSFiddle，如果你想在这里看到它：http://jsfiddle.net/autoboxer/opqcxm9k/

干杯， autoboxer

如何在容器div中“自动换行”div？

4 个答案: