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

Question

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

这是它的工作原理。

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

现在，这是一个问题：

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

我想要的是这样的：

正如您所看到的，如果Tag项目不够小，无法容纳可用区域，则它会进入下一行，但如果空间可用，则它将位于同一行。

用CSS获得它的任何方法？或者需要为此编写JS逻辑？

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

Answer 1

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

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

的CSS样式

display: inline-block;

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

看看你的例子，看起来你有一些带有“overflow：hidden”的div容器。 在这个senario中，您要么删除溢出：隐藏 要么 你可以用另一个div包装输入文本框并在那里设置宽度。

修改

这是示例

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

Answer 2

您也可以使用max-inline-size属性执行此操作：

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