javascript - 输入小于 100px 时换行，显示 flex

Question

我正在做一个带有标签的搜索框，但是当我添加超过 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>

Answer 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>