Html - How to force text wrap to image width?

duruburak
June 24, 2023
189 views
3 votes
3 Answers

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/

Answers

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.

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>

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

Please signup or login to give your own answer.

Click here to cancel reply.

Html – How to force text wrap to image width?

Answers