自動幅の区切りにテキストを折り返すようにする

Question

垂直リストには、画像とビューポートのサイズに基づいてサイズ変更された応答性の高いimg要素があります。

各画像は下部に説明が必要ですが、水平にコンテナを拡大しないでください。 （私は現在、新しい行にテキストを折り返すことができません）

最初の例では、テキストはコンテナの幅を広げます。 2番目の例では、私が望むものをシミュレートするために<br>タグを追加しなければなりませんでした。

（CSSを使用して）テキスト要素のラップを制御する方法はありますか？

Btw, here's the JSFiddle for this example.

Answer 1

あなたは次のように、このために.boxにwidth: min-contentを使用することができます。

.box { 
 
    width: min-content; 
 
    display: table; 
 
    position: relative; 
 
    background: #334b64; 
 
    margin: 0px auto 20px auto; 
 
    box-shadow: 0px 0px 50px rgba(29, 80, 123, 0.3); 
 
} 
 

 
.text { 
 
    color: white; 
 
    font-size: 14; 
 
    text-align: center; 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    word-wrap: break-word; 
 
    white-space: pre-wrap 
 
}

<div class="container-fluid container-screenshot"> 
 
    <div class="img-responsive-parent"> 
 
    <div class="box"> 
 
     <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Guarita_-_Torres_-_Brasil_.JPG/320px-Guarita_-_Torres_-_Brasil_.JPG" /> 
 
     <h4 class="text">Example text. This text should wrap, not expanding the div.</h4> 
 
    </div> 
 

 
    <div style="display:table; position: relative; background: #334b64; margin: 0px auto 30px auto; box-shadow: 0px 0px 50px rgba(29, 80, 123, 0.3);"> 
 
     <img class="img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Guarita_-_Torres_-_Brasil_.JPG/320px-Guarita_-_Torres_-_Brasil_.JPG" /> 
 
     <h4 class="text">How it should behave:<br>A new line should be created without manually<br>adding a BR tag</h4> 
 
    </div> 
 
    </div> 
 
</div>

：

.box { 
    width: min-content; 
} 

以下のスニペットやupdated fiddleを見てください

希望します。