如何避免标签输入宽度为 100%答案

【问题标题】：How to avoid tag inputs getting width of 100%如何避免标签输入宽度为 100%
【发布时间】：2015-07-06 14:36:32
【问题描述】：

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

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

第二部分是一旦达到最大标签数量，我可以删除输入部分吗？达到最大值后仍然能够输入似乎违反直觉。

【问题讨论】：

【解决方案1】：

第 1 部分

您可以使用自定义 CSS 类更改默认宽度：

HTML

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

CSS

.myclass .host {
  width: 50%;
}

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

HTML

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

CSS

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

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

【讨论】：

【解决方案2】：

实际上设置display:block 以及宽度似乎也可以工作

【讨论】：

【解决方案3】：

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

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

CSS

.tags {
    width: 80%;
}

【讨论】：