CODEWITHSUNDEEP
css
Glen Little
Glen Little

Reputation: 7128

Parent too large after child white-space: nowrap

In this image, there is extra space in the last box as indicated by the red arrows. How can this be fixed?

The last phrase has white-space: nowrap around it.

enter image description here

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>

Upvotes: 4

Views: 1125

Answers (1)

Jacob G
Jacob G

Reputation: 14172

Just add display:block; to .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>

Upvotes: 2

Related Questions