CSS

Question

我有一个复选框，旁边有一个小弹出窗口 window:

HTML:

<div class="box">
  <div class="checkbox-wrapper">
    <input type="checkbox" class="checkbox" />
    <p class="checkbox-label">Filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
  </div>
</div>

CSS:

.box {
  width: 80%;
  height: 100px;
  background-color: #d1d1d1;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.checkbox-wrapper {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  margin-left: 50%;
  transform: translate(-50%, 0);
}

.checkbox {
  display: inline-block;
}

.checkbox-label {
  display: inline-block;
  color: #2e2e2e;
  font-size: 15px;
  margin: auto;
  margin-left: 10px;
}

JSFiddle

问题是因为我 .checkbox-wrapper 是 white-space: nowrap;，所以它从弹出菜单中消失了。但是，如果我删除 white-space: nowrap;，文本会很快换行，并且不会占用弹出窗口 window 中的所有 space。我怎样才能使文本仅在达到弹出窗口 div 宽度的 100% 后换行？

Answer 1

你可以在这里使用 flexbox，我在这里附上了 jsfiddle 片段。

.box {
  width: 80%;
  height: 100px;
  background-color: #d1d1d1;
  margin-left: 50%;
  transform: translate(-50%, 0);
 }

 .checkbox-wrapper {
  display: flex;
  max-width: 100%;
  flex-wrap: nowrap;
 }

 .checkbox-label {
  color: #2e2e2e;
  font-size: 15px;
  margin-left: 10px;
    margin-top: 0;
 }

<div class="box">
 <div class="checkbox-wrapper">
  <input type="checkbox" class="checkbox" />
  <p class="checkbox-label">Filler filler filler filler filler filler filler filler filler filler filler filler filler filler</p>
 </div>
</div>

CSS - 仅在绝对需要时才在 div 中换行

CSS - Wrap text in div only when absolutely needed

html

whitespace

nowrap