html - CSS - 仅在绝对需要时在 div 中包装文本

Question

我在一个小弹出窗口中有一个带有文本的复选框：

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;，文本会很快换行并且不会占用弹出窗口中的所有空间。我怎样才能使文本仅在达到弹出 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>