如何根据 <span> 元素的宽度将 <span> 元素置于彼此下方

Question

这听起来很基本和愚蠢的问题，但我必须让它工作，因此在这个频道上被问到。我有一个元素span，我想将它们放在一起，我有一个span元素的宽度。我希望该跨度中的元素尊重宽度，当它们超出宽度时，我希望它们落在下一行。

 <div class="text">

     <span>

    eel1

    </span>

    <span>

    eel1

    </span>

    <span>

    eel1

    </span>

    <span>

    eel1

    </span>

  </div>

// these values are array of strings that I populate inside this span

这是它目前的样子：

https://jsfiddle.net/gpjcutr9/2/

所以我正在考虑将其作为输出。

ele1, ele2, ele3,

ele4, ele5, ele6

因此，根据span我希望能够在一行中显示那么多元素的宽度。也因为这不是静态 HTML，而是spans为这些元素动态生成的。

Answer 1

删除clear: left;css 中的from 跨度。也就是说，每个 span 元素不应该允许其左侧的浮动元素导致 span 转到下一行。还要更改测试类的宽度。在 20px 时，它太小而无法容纳 span 元素。你的 css 应该是这样的：span {&nbsp; float: left;}.test {&nbsp; width: 100%;}.spanWidth {&nbsp; width: 80px;}