Prevent text from expanding wrapper

Question

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>

try adding `max-width: 100px;width: 100%;display:block;position:relative;` to `.image_wrapper`. Change the 100px for the value you want. — Diego Fortes, Apr 02 '18 at 01:29

Adam · Answer 1 · 2018-04-01T02:07:18.170

0

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

edited Apr 01 '18 at 02:07

answered Mar 31 '18 at 19:57

Adam

1,385
1
10
23

With your example, the text appears outside of the .image_wrapper. – godfathr Mar 31 '18 at 20:06
1

oh just saw that! good call. – Adam Mar 31 '18 at 20:08
1

yes it doesn't work :( – Spise Pause Apr 01 '18 at 01:48
@SpisePause now its working! lol – Adam Apr 01 '18 at 02:08
@SpisePause did you notice that when you use this solution the text appears outside of your wrapper? – godfathr Apr 01 '18 at 22:09

godfathr · Answer 2 · 2018-04-01T22:18:11.863

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>

Wow, thanks for your suggestion! But I don't really know how jQuery works! — Spise Pause, Mar 31 '18 at 22:41
Why the down vote? The last solution doesn't use jQuery. I suppose you didn't look at the last option? I just recommended the first two as they are the best option. jQuery is powerful and a great way to supplement your CSS, particularly when you have multiple images on the page that may vary in size. — godfathr, Apr 01 '18 at 22:08
I re-ordered my suggestions with the non-jQuery version to be at the top. I suppose my list of options was TL;DR. With the first proposed solution from @Adam, did you notice that the text appears outside of your wrapper? Yes, the text is the same width but you will most likely run into issues with your text overlapping other elements on the page. The figure/figcaption keeps your text inside of the figure element just like you wanted. — godfathr, Apr 01 '18 at 22:20

Prevent text from expanding wrapper

2 Answers2