使 ngTags 可滚动

Question

谁能告诉我如何使 ng-input-tag(Angular) 在 X 方向可滚动。目前，如果我插入标签，则 div 的高度会增加。我想要的是，如果我继续插入标签，那么它应该沿 X 方向滚动

我尝试过：宽度：自动；高度：34px；溢出-x：自动；溢出-y：隐藏；空白：nowrap；但它没有按预期工作

所以让我知道我错在哪里。

Answer 1

我知道这已经晚了，但我最近看到类似的问题没有得到解答，并且这个问题位于谷歌搜索此问题的顶部。仅使用 CSS 即可完成此操作。如果您想要添加视觉效果，请尝试自定义滚动条。

对于X方向：

如果您决定在标签上设置最小宽度或宽度，这可能会变得有点难看。

我发现在 X 方向上做到这一点的唯一方法是使用 flexbox：

tags-input .tags .tag-list {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
}

tags-input .tags .tag-item {
    /* Applying this display class */
    display: inline-table;        

    /* OR set the tag width to ensure that the text is visible */
    min-width: 150px; /* Could also use width: 123px */
}

这个Github问题也与该问题有直接关系。

对于Y方向：

对类应用固定高度.tags并将其设置overflow-y为滚动将为您提供所需的结果：

.tags {
    height: 34px;
    overflow-y: scroll;
}