How to force text wrap to image width?

Question

I'm trying to match the width of .text to img. But because it contains a long text it expands the .container. I need .text's text to be wrapped consistently in order to equalize the width with .image. But the problem is I can't set static wrap-length, because the .image's not static thus its width is not pre-determined. How can I achieve this, is it possible with CSS or I need some Javascript?

.parent {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.image {
  display: block;
  max-width: 100%;
  max-height: 90%;
}

.text {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f8e8ee;
  text-align: center;
}

<div class="parent">
  <div class="container">
    <img src="https://i.stack.imgur.com/tsiOZ.jpg" class="image" />
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus porta augue at porta. Sed convallis dictum dolor, non iaculis urna dapibus sit amet. Donec ipsum nunc, dictum sed est ac, feugiat lobortis diam. Nulla id sapien dictum enim tempus
      tincidunt. Integer iaculis, ex a luctus auctor, ligula quam aliquet ex, eu luctus velit ipsum nec nunc. Donec sed nisi a velit rutrum euismod. Nullam eu orci vel ligula maximus aliquam ut eu tortor. Donec aliquet, enim quis ornare tincidunt, massa
      ipsum tincidunt tortor, quis maximus lacus ipsum ut lacus. Sed sollicitudin diam quis finibus faucibus. Morbi id egestas risus, eget ultricies ipsum. Pellentesque posuere accumsan purus, in semper ligula mattis ac. Sed finibus interdum nulla, vitae
      vulputate mauris finibus et. Nunc porttitor viverra dui, vel tempus tellus tempor at. Praesent sit amet rutrum nisi, in consequat enim. Maecenas nec nisl at nulla feugiat placerat eget non tellus.
    </div>
  </div>
</div>

https://jsfiddle.net/xk3Lpfno/

Thanks! So, should the text area's width be the exact same as the one of the image's? — Lajos Arpad, Jun 24 '23 at 15:44
@LajosArpad Yes, but it should work for any image not just this one. — duruburak, Jun 24 '23 at 15:49
Maybe put them both in div, that way neither will be able to expand beyond it — Mr. Orange, Jun 24 '23 at 15:52
@DanielSabrel It should be at the center and together they two should take the 100% of height — duruburak, Jun 24 '23 at 16:06
I think the image is expanding the div rather than the text. So, like @Mr. Orange said, you can wrap image and text inside another div and get the result if position of parent was like relative or something — Reyot, Jun 24 '23 at 16:20

score 1 · Accepted Answer · answered Jun 24 '23 at 16:32

According to this - Post

You could use this code to make the text forced to be the width of the image with.

.parent {
  background: pink;
  display:inline-block;
}

.description {
  width:0;
  min-width:100%;
}

img {
  width: 200px /*adjust as needed*/
}

<div class="parent">
   <img src="https://scied.ucar.edu/sites/default/files/styles/half_width/public/2021-10/cumulus-clouds.jpg.webp?itok=HkQfuWxM">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

score 0 · Answer 2 · answered Jun 24 '23 at 16:14

This is how you can achieve that using Javascript:

window.addEventListener('load', function() {
    document.querySelector(".text").style.width =  document.querySelector('.image').offsetWidth + "px";
});

.parent {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.image {
  display: block;
  max-width: 100%;
  max-height: 90%;
}

.text {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f8e8ee;
  text-align: center;
}

<div class="parent">
  <div class="container">
    <img src="https://i.stack.imgur.com/tsiOZ.jpg" class="image" />
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus porta augue at porta. Sed convallis dictum dolor, non iaculis urna dapibus sit amet. Donec ipsum nunc, dictum sed est ac, feugiat lobortis diam. Nulla id sapien dictum enim tempus
      tincidunt. Integer iaculis, ex a luctus auctor, ligula quam aliquet ex, eu luctus velit ipsum nec nunc. Donec sed nisi a velit rutrum euismod. Nullam eu orci vel ligula maximus aliquam ut eu tortor. Donec aliquet, enim quis ornare tincidunt, massa
      ipsum tincidunt tortor, quis maximus lacus ipsum ut lacus. Sed sollicitudin diam quis finibus faucibus. Morbi id egestas risus, eget ultricies ipsum. Pellentesque posuere accumsan purus, in semper ligula mattis ac. Sed finibus interdum nulla, vitae
      vulputate mauris finibus et. Nunc porttitor viverra dui, vel tempus tellus tempor at. Praesent sit amet rutrum nisi, in consequat enim. Maecenas nec nisl at nulla feugiat placerat eget non tellus.
    </div>
  </div>
</div>

You can try applying CSS-only rules, possibly inspired by Set div to have its siblings width, but given the fact that the image's width is not known and it could be changed, I'm not sure that it will yield to the results that you expect.

Ahmed Zamil · Answer 3 · 2023-06-24T16:44:32.470

window.addEventListener('load', function() {
  const container = document.querySelector('.container');
  const text = document.querySelector('.text');
  const image = document.querySelector('.image');
  
  function adjustTextWidth() {
    const imageWidth = image.offsetWidth;
    text.style.maxWidth = imageWidth + 'px';
  }
  
  adjustTextWidth();
  
  window.addEventListener('resize', adjustTextWidth);
});

.parent {
  display: flex;
  position: fixed;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

.image {
  display: block;
  max-width: 100%;
  max-height: 90%;
}

.text {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #f8e8ee;
  text-align: center;
  max-width: 100%; /* Add this */
  overflow-wrap: break-word; /* Add this */
}

<div class="parent">
  <div class="container">
    <img src="https://i.stack.imgur.com/tsiOZ.jpg" class="image" />
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dapibus porta augue at porta. Sed convallis dictum dolor, non iaculis urna dapibus sit amet. Donec ipsum nunc, dictum sed est ac, feugiat lobortis diam. Nulla id sapien dictum enim tempus
      tincidunt. Integer iaculis, ex a luctus auctor, ligula quam aliquet ex, eu luctus velit ipsum nec nunc. Donec sed nisi a velit rutrum euismod. Nullam eu orci vel ligula maximus aliquam ut eu tortor. Donec aliquet, enim quis ornare tincidunt, massa
      ipsum tincidunt tortor, quis maximus lacus ipsum ut lacus. Sed sollicitudin diam quis finibus faucibus. Morbi id egestas risus, eget ultricies ipsum. Pellentesque posuere accumsan purus, in semper ligula mattis ac. Sed finibus interdum nulla, vitae
      vulputate mauris finibus et. Nunc porttitor viverra dui, vel tempus tellus tempor at. Praesent sit amet rutrum nisi, in consequat enim. Maecenas nec nisl at nulla feugiat placerat eget non tellus.
    </div>
  </div>
</div>

You can try this. With this in your fiddle it looks consistent wrapping of the text in the .text element and equalize its width with the .image.

that might be easy if you can use both css and java script.( I have tried with your fiddle seems works fine)

simple code here actually listens for the load event then calculates width of the ".image" eventually sets the same width for ".text"

keep on mind here I use "maxWidth" property [You might not like].

Not sure how and where you are trying to use this. But seems that would help you in any env. Happy coding

How to force text wrap to image width?

3 Answers3