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 */
}

这个 Github issue 也与问题直接相关。

对于 Y 方向：

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

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

Answer 2

尝试这个

简单的 css 添加标签输入类以在 x 和 y 轴上滚动

.tags-input {
      max-width: 100%;
      line-height: 22px;
      overflow-y: scroll;
      overflow-x: scroll;
      height: 65px;
      cursor: text;
 }