孩子白空间后父母太大了：nowrap

Question

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

最后一个短语围绕着white-space: nowrap。

JSFiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>