親が子供の後に大きすぎる空白：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

だけ.testにdisplay:block;を追加します。

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