css - 如果元素不适合可用区域宽度，则使用 CSS 将元素移动到下一行

Question

我有一个使用 ExtJS 创建的 View ，由一个自动完成文本框(绑定(bind)到一个商店)和一个自定义模板化 DataView(同样，绑定(bind)到另一个商店)组成。 View 如下所示。

这是它的工作原理。

• 用户在搜索框中搜索标签，然后从下拉列表中选择匹配的标签。选择后，它会自动添加到下方的数据 View 中，看起来像标签云(虽然不完全是)。
• 添加到 DataView 的标签项是自定义样式的，标签旁边有“删除”链接以将其从 DataView 中删除。

现在，有一个问题:

• DataView 的可用宽度是固定的，因此如果标签项文本较长，您会看到它被破坏并且标签的剩余部分出现在下一行。

我想要的是这样的:

如您所见，如果 Tag 元素不够小，无法容纳可用区域，它会进入下一行，但如果有可用空间，它将在同一行。

有什么方法可以用 CSS 实现吗？还是需要为此编写 JS 逻辑？

请注意，对于 CSS 解决方案，我一定会支持邪恶的 IE7/8。

Answer 1

是的，你可以在 CSS 中做类似的事情，您有可以在线发布的示例代码吗？这样我们就可以就您的实际代码提供建议？

但要实现这一点，每个输入字段都需要有一个

的 css 样式

display: inline-block;

所以如果它适合提供的宽度，它会留在同一行，但如果文本框太大，它会转到下一行。

看看你的例子，你似乎有一些带有“溢出:隐藏”的div容器。在这种情况下，您可以删除溢出:隐藏或者您可以用另一个 div 包裹输入文本框并在那里设置宽度。

编辑

举个例子

http://jsfiddle.net/Raver0124/7X2h3/