Prevent text from expanding wrapper [duplicate] - html

Question

This question already has answers here:
Make wrapper take maximum width of child image? [duplicate]
(2 answers)
Closed 4 years ago.
I have a DIV-wrapper (centered) that contain a picture and a paragraph:
What I want to do is to make the width of the wrapper flexible, so that it can fit the width of the picture. I have achieved this with display:table; (I also tried inline-block, and also width:fit-content; [the last of which oddly enough didn't work]).
The text also fits perfectly in there, but...! As soon as the text becomes longer than the width of the picture, the wrapper expands to fit the text rather than fitting the picture (and breaking the text).
Is there any solution to this problem?
.image_wrapper {
display:table;
margin:25px auto 25px auto; /* centering wrapper on page */
text-align:center;
border: 1px solid red;
}
.image_wrapper img {
height: auto;
max-width:99%;
border: 3px solid #31558e;
}
.image_wrapper p {
color:#84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left:0px;
}
<div class="image_wrapper">
<img src="pic.jpg">
<br>
<p>Some text</p>
</div>

Answer 1

.wrapper {
border: 1px solid red;
display: table;
width: 1%;
margin: 0 auto;
}
.caption {
text-align: center;
}
<div class="wrapper">
<img src="http://via.placeholder.com/200/300">
<p class="caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ornare dictum ligula quis dictum. Nam dictum, eros sit amet imperdiet aliquet, ligula nisl blandit lectus, quis malesuada nunc ipsum ac magna. Vestibulum in magna eu sem suscipit molestie.
Maecenas a ligula molestie, volutpat turpis et, venenatis massa. Nam aliquam auctor lectus ac lacinia. Nam consequat lacus porta odio hendrerit mollis. Etiam at congue est, eu fermentum erat. Praesent vestibulum malesuada ante. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

Answer 2

You can take the approach without jQuery using the figure/figcaption combination BUT, this only works if you have one figure/figcaption element on the page.
Set the height of the figure to be 100% and set the width of the fig caption to be the width of your image. This will contain all your text in the figure element and allow the height to expand to the length of your text.
figure {
display: table;
margin: 25px auto 25px auto;
/* centering wrapper on page */
text-align: center;
border: 1px solid red;
height: 100%;
}
figcaption {
color: #84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left: 0px;
width: 100px;
}
<figure>
<img src="http://via.placeholder.com/100x150" width="100">
<br>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>
I would suggest using some jQuery to take care of calculating the width as well as the case of multiple div's with images of different sizes.
$(document).ready(function() {
$(".image_wrapper img").each(function(index, value) {
var width = $(this).width();
$(this).parent().children(".image_wrapper > p").css("width", width);
})
});
.image_wrapper {
display:table;
margin:25px auto 25px auto; /* centering wrapper on page */
text-align:center;
border: 1px solid red;
}
.image_wrapper img {
height: auto;
max-width:99%;
border: 3px solid #31558e;
}
.image_wrapper p {
color:#84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrapper">
<img src="http://via.placeholder.com/100x150">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>
<div class="image_wrapper">
<img src="http://via.placeholder.com/150x150">
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</p>
</div>
Also, you don't need to write custom div's with classes if you use the figure/figcaption combintation.
$(document).ready(function() {
$(".myFigure img").each(function(index, value) {
var width = $(this).width();
$(this).parent().children(".myFigure > .myCaption").css("width", width);
})
});
figure {
display: table;
margin: 25px auto 25px auto;
/* centering wrapper on page */
text-align: center;
border: 1px solid red;
height: 100%;
}
figcaption {
color: #84bddb;
font-size: 13.3px;
line-height: 15px;
text-align: left;
margin-left: 0px;
/*width: 100px;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<figure class="myFigure">
<img src="http://via.placeholder.com/100x150" width="100">
<br>
<figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>
<figure class="myFigure">
<img src="http://via.placeholder.com/150x150">
<br>
<figcaption class="myCaption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut nulla consequat, ullamcorper erat vitae, dictum leo. Phasellus semper, ante eget semper eleifend, tortor tortor facilisis quam, vitae convallis neque nunc non justo. Maecenas rhoncus
ligula id velit consectetur, sed malesuada tellus pharetra. Nulla ac dolor at ex sodales tincidunt vitae gravida turpis. Etiam erat nunc, aliquet a ullamcorper eget, commodo et orci. In id urna sagittis ante viverra venenatis. Ut laoreet ligula vel
orci placerat, at fringilla odio euismod. Etiam euismod eget ligula at dapibus. Sed vel bibendum nibh.</figcaption>
</figure>