输入小于 100px 时换行，显示 flex答案

【问题标题】：Line break on input smaller than 100px, display flex输入小于 100px 时换行，显示 flex
【发布时间】：2018-11-29 10:50:33
【问题描述】：

我正在做一个带有标签的搜索框，但是当我添加超过 X 个标签时没有换行符。

输入为 100% - “标记元素”（宽度：-webkit-fill-available;）但我想在输入小于 100px 时换行，因为现在输入字段熄灭“inputholder”框。

这里有一个示例代码（如果你在输入框中按回车，标签元素被添加到输入框）：

这是我的 HTML：

$(".search-input").keypress(function(e) {
  if (e.which == 13) {
    $('#inputtext').before('<span class="tag">test-tag</span>');
    $('.search-input').val('');
  }
});

.inputholder {
  /*border:1px solid black;*/
  display: flex;
  align-items: baseline;
  padding-left: 5px;
  float: left;
  background: #FAFAFA;
  border: 1px solid #ccc;
  color: #8D9BAF;
  width: 70%;
  /*padding:10px;*/
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.location-tag {
  cursor: pointer;
  padding: 0px;
  width: 20%;
}

.tag {
  padding: 7px;
  background-color: #AAA;
  border-radius: 20px;
  font-size: 15px;
  margin-right: 2px;
  color: white;
  text-align: center;
  white-space: nowrap;
  /*display: table-cell;*/
}

.tag-selected {
  background: #424242;
}

.inputholder input {
  border: 0 !important;
  padding: 12px !important;
  width: -webkit-fill-available;
  float: right;
  padding: 10px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: transparent !important;
  color: #8D9BAF;
}

.inputholder input:focus {
  outline-width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputholder">
  <span class="tag location-tag">
        <i class="fas fa-map-marker-alt"></i> Ubicación
    </span>
  <input type="text" class="search-input" id="inputtext" />
</div>

【问题讨论】：

标签： javascript html css flexbox line-breaks

【解决方案1】：

$(".search-input").keypress(function(e) {
  if (e.which == 13) {
    $('#inputtext').before('<span class="tag">test-tag</span>');
    $('.search-input').val('');
  }
});

.inputholder {
  /*border:1px solid black;*/
  /*display: flex;*/
  align-items: baseline;
  padding-left: 5px;
  float: left;
  background: #FAFAFA;
  border: 1px solid #ccc;
  color: #8D9BAF;
  width: 70%;
  /*padding:10px;*/
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}

.location-tag {
  cursor: pointer;
  padding: 0px;
  width: 20%;
}

.tag {
display:inline-flex;
  padding: 7px;
  background-color: #AAA;
  border-radius: 20px;
  font-size: 15px;
  margin-right: 2px;
  color: white;
  text-align: center;
  white-space: nowrap;
  /*display: table-cell;*/
}

.tag-selected {
  background: #424242;
}

.inputholder input {
  border: 0 !important;
  padding: 12px !important;
  width: -webkit-fill-available;
  float: right;
  padding: 10px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background: transparent !important;
  color: #8D9BAF;
}

.inputholder input:focus {
  outline-width: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="inputholder">
  <span class="tag location-tag">
        <i class="fas fa-map-marker-alt"></i> Ubicación
    </span>
  <input type="text" class="search-input" id="inputtext" />
</div>

【讨论】：