css - 父级在子级空白之后太大 : nowrap

Question

在此图像中，最后一个框中有额外的空间，如红色箭头所示。如何解决？

最后一个短语周围有 white-space: nowrap。

JSFiddle

.outer {
  text-align: center;
}
.outer div {
  max-width: 400px;
  border: #d89648 4px solid;
  color: #D97A23;
  border-radius: 999px;
  padding: 10px 30px 12px 30px;
  margin: 0 auto 15px auto;
  display: inline-block;
}
.test {
  white-space: nowrap;
}
.bad div {
  border-color: red;
}

<div class="outer">
  <div>
    This containing box resizes according to the amount of text in it, up to a maximum width. The round borders stay nice when the box is taller because the radius used is much bigger.
  </div>
</div>

<div class="outer">
  <div>
    This has few words and the box is smaller.
  </div>
</div>

<div class="outer">
  <div>
    This box has just as much text in it as the next one, but the next one should be narrower.
  </div>
</div>

<div class="outer bad">
  <div>
    This part of this sentence can wrap, but <span class="test">not this part, which must stay together.</span>
  </div>
</div>

Answer 1

只需将 display:block; 添加到 .test 即可:

.outer {
  text-align: center;
}
.outer div {
  max-width: 400px;
  border: #d89648 4px solid;
  color: #D97A23;
  border-radius: 999px;
  padding: 10px 30px 12px 30px;
  margin: 0 auto 15px auto;
  display: inline-block;
}
.test {
  white-space: nowrap;
  display:block;
}
.bad div {
  border-color: red;
}

<div class="outer">
  <div>
    This containing box resizes according to the amount of text in it, up to a maximum width. The round borders stay nice when the box is taller because the radius used is much bigger.
  </div>
</div>

<div class="outer">
  <div>
    This has few words and the box is smaller.
  </div>
</div>

<div class="outer">
  <div>
    This box has just as much text in it as the next one, but the next one should be narrower.
  </div>
</div>

<div class="outer bad">
  <div>
    This part of this sentence can wrap, but <span class="test">not this part, which must stay together.</span>
  </div>
</div>