ng-tags-input - 使 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 */
}

This Github issue is also directly related to the problem.

Y方向:

对 .tags 应用固定高度类和设置 overflow-y滚动会给你想要的结果:

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