如何避免标签输入的宽度达到 100%

How to avoid tag inputs getting width of 100%

所以这是一个专门针对 Angular 输入标签项目的两部分问题。

我目前正在使用它，它创建的输入在输入标签本身上设置为宽度 100%。因为它在元素本身上，所以它会覆盖我使用的任何其他样式（除了 !important 或 js）。如果没有分叉项目，有什么办法可以关闭它吗？

第二部分是达到最大标签数量后是否可以删除输入部分？在达到最大值后仍然能够打字似乎违反直觉。

第 1 部分

您可以使用自定义 CSS class:

更改默认宽度

HTML

<tags-input ng-model="tags" class="myclass"></tags-input>

CSS

.myclass .host {
  width: 50%;
}

Working Plunker

第 2 部分

您也可以使用自定义 CSS class 隐藏输入：

HTML

<tags-input ng-model="tags" ng-class="{'hide-input': tags.length > 3}"></tags-input>

CSS

.hide-input .input {
  display: none;
}

Working Plunker.

但请记住，用户将无法使用键盘删除标签。

实际上设置 display:block 和宽度似乎也有效

由于另一个 CSS 文件 ace.css，我遇到了有关 ng-tags-input 宽度的问题，组件的宽度没有按预期显示，因为宽度值来自表单ace.css。

为了解决这个问题，我刚刚创建了另一个 CSS 文件来覆盖来自 ace.css 的宽度值，在 ace.css 之后添加它，它现在可以工作了。

CSS

.tags {
    width: 80%;
}