Machen Sie Text Wrap innerhalb der Auto-Breite div

Question

Ich habe eine Reihe von reagierenden img-Elemente (sie Größe auf der Grundlage von Bild und Viewport-Größe) auf einer vertikalen Liste.

Jedes Bild benötigt eine Beschreibung am unteren Rand, aber es sollte den Container nicht horizontal erweitern. (Ich kann den Text derzeit nicht in eine neue Zeile einfügen)

Im ersten Beispiel erweitert der Text die Breite des Containers. Beim zweiten Beispiel musste ich <br> Tags hinzufügen, um zu simulieren, was ich will.

Gibt es eine Möglichkeit der Umhüllung des Textelements zu steuern (durch Verwendung von CSS)?

Btw, here's the JSFiddle for this example.

Answer 1

können Sie width: min-content zum .box für diese, wie:

.box { 
    width: min-content; 
} 

Werfen Sie einen Blick auf das Snippet unten oder updated fiddle:

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

Hoffe, das hilft!