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代码段。

  Exception in thread "main" java.lang.ClassNotFoundException: LdaCourtApplication
        at java.base/java.net.URLClassLoader.findClass(URLClassLoader.java:466)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:566)
        at org.springframework.boot.loader.LaunchedURLClassLoader.loadClass(LaunchedURLClassLoader.java:93)
        at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:499)
        at org.springframework.boot.loader.MainMethodRunner.run(MainMethodRunner.java:46)
        at org.springframework.boot.loader.Launcher.launch(Launcher.java:87)
        at org.springframework.boot.loader.Launcher.launch(Launcher.java:50)
        at org.springframework.boot.loader.JarLauncher.main(JarLauncher.java:51)

.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;
	}

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

1 个答案: