Limit Text to The Width of Sibling Image/Auto Width in CSS

Limit text to the width of sibling image / auto width in CSS

Stylesheet

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

note: to enable wrapping just remove that last css line

HTML

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

I've checked it in Chrome, Firefox and IE7 and it looks good in all three. I realise this has the width on the div and not the img, but at least you only need to set the width in one place. Short of using css-expressions (IE only) I can't see a way of setting the outer divs width to the width of the first child element.

How to match width of text to width of dynamically sized image/title?

Make the container inline-block (or any shrink-to-fit configuration like table,inline-grid,inline-flex, float,absolute etc) then force the width of text to be 0 so the width of the container is defined by the image (the text doesn't contribute to the width) then force the width again to be 100% using min-width

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

img {
  display: block;
  max-height: 70vh;
}

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

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
  <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>

Set width of element to width of sibling

A quick way to solve this would be to simply use some jQuery. It would only take two lines of code to achieve this.

var imgWidth = $('.image').width();
$('.content').width(imgWidth);

Constraining a div width to the width of a fluid image inside it

It sounds like you want the containing div to expand it's width only for img elements and not span elements. Is that correct?

There is no pure CSS solution for this, JavaScript is the best way to achieve what you're after.

Two similar questions:

• CSS: Force text to wrap (OR defining element width by only one of its children)

• Limit text to the width of sibling image / auto width in CSS

---

Related Topics