如果元素不适合可用区域宽度，则使用 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;
}