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

Question

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

这是它的工作原理。

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

现在，这里有一个问题：

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

我想要的是这样的：

如您所见，如果标签项不够小，无法容纳可用区域，它将进入下一行，但如果空间可用，它将位于同一行。

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

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

Answer 1

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

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

display: inline-block;

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

查看您的示例，您似乎有某种带有“溢出：隐藏”的 div 容器。在这个场景中，您可以删除溢出：隐藏，或者您可以用另一个 div 包装输入文本框并在那里设置宽度。

编辑

这是示例

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

Answer 2

你也可以使用max-inline-size属性来做到这一点：

.x-tagfield-input  {
  max-inline-size: size in px;
}