如何让 md-chips 水平溢出？答案

【问题标题】：How to make md-chips overflow horizontally?如何让 md-chips 水平溢出？
【发布时间】：2018-04-19 20:35:26
【问题描述】：

当超过输入长度时，md-chips 会创建一个新行。我希望芯片始终在一行中继续，并且输入水平溢出，就像普通文本输入一样。如何做到这一点？这个answer 不适合我。

不良行为的图像：

【问题讨论】：

你能提供一个关于你迄今为止尝试过的代码吗？
你问的是angularjs-material还是angular-material (angular2/4)？

标签： html css angularjs-material md-chip

【解决方案1】：

如果你想用纯css溢出芯片，你可以这样做：(PLUNKER)

HTML

<md-chips class="chips-overflow" placeholder="Enter an animal..."></md-chips>

CSS

.chips-overflow .md-chips {
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
}

.chips-overflow .md-chips md-chip, 
.chips-overflow .md-chips .md-chip-input-container {
  display: inline-block;
  float: none;
}

** 这将与 angularjs-material version >= 1.1.0 完美配合，并且它可以工作，但在 angularjs-material version >= 0.0 的占位符上会出现问题.9

【讨论】：

显然，你没有像 angularjs 材质标签那样的溢出，这将是浏览器水平滚动条。要执行此类操作，您必须添加两个具有固定位置的箭头图标，当用户单击它时，使用javascript scrollLeft 以编程方式移动滚动。此外，您将不得不使用一些 css 技巧来隐藏单杠。如您所见，这不是一件容易的事……我希望我的回答对您来说已经足够了
这确实有效。我只需要调整容器，这样芯片就会在里面溢出。感谢您的宝贵时间。
节省了我的时间和精力 :)