I want to automatically break characters according to the width of the image with CSS.* If it is not possible with CSS, javascript or jQuery

Currently the caption of the image is displayed beyond the width of the image,
I am trying to automatically break characters according to the size of the image.

The image is specified by "max-width: 100%".
If i can specify "width" for the parent element of the image, you can specify "white-space: pre-wrap;" etc. to automatically start a new line of the character, but since the width of the image is specified variable, the character Automatic line breaks cannot be performed
I feel like I should use "display: inline" etc., but I can't do it well.
Is there any good way?



<figcaption>The iPhone is an Apple smartphone. The original model was released in January 2007. The first iPhone follows the basic operation and design of PDAs such as iPAQ, which were already in circulation at that time.</Figgcaption>
  • Answer # 1

    How about below?

    figure {
       width: min-content;

    CodePen sample

    width --CSS: Cascading stylesheet # min-content | MDN

Related articles