如果元素不适合可用区域宽度，则使用 CSS 将元素移动到下一行
Kus*_*hal 5 css extjs tag-cloud extjs4
我有一个使用 ExtJS 创建的视图，由自动完成文本框（绑定到商店）和自定义模板化 DataView（同样，绑定到另一个商店）组成。视图如下所示。
这是它的工作原理。
- 用户在搜索框中搜索标签，然后从下拉列表中选择匹配的标签。选择后，它会自动添加到正下方的数据视图中，看起来像标签云（尽管不完全一样）。
- 添加到 DataView 的标签项是自定义样式的，并且标签旁边有“删除”链接以将其从 DataView 中删除。
现在，有一个问题：
- DataView 的可用宽度是固定的，因此如果标签项文本较长，您可以看到它被破坏并且标签的剩余部分出现在下一行。
我想要的是这样的：
正如您所看到的，如果标签项不够小，无法容纳可用区域，它将进入下一行，但如果空间可用，它将位于同一行。
有什么方法可以用 CSS 实现它吗？或者需要为此编写JS逻辑？
请注意，对于 CSS 解决方案，我必须支持邪恶的 IE7/8。
是的，你可以在 CSS 中做类似的事情，你有可以在网上发布的示例代码吗？那么我们可以就您的实际代码提供建议吗？
但要实现这一点，每个输入字段都需要有一个 css 样式
display: inline-block;
因此，如果它适合提供的宽度，它将保留在同一行，但如果文本框太大，它将转到下一行。
看看你的例子，你似乎有某种带有“overflow：hidden”的div容器。在这种情况下，您可以删除溢出：隐藏或者您可以用另一个 div 包裹输入文本框并在那里设置宽度。
编辑
这是例子
http://jsfiddle.net/Raver0124/7X2h3/