CSS : 이미지가 작아도 이미지 주위에 컨테이너 요소를 감싸고 텍스트는 감싸지 않습니까?

Question

빨간색 컨테이너 요소는 텍스트가 아닌 이미지의 너비가 좋겠지 만 텍스트가 더 넓기 때문에 텍스트의 크기까지 확장됩니다. 이것을 달성하는 방법?

https://jsfiddle.net/strz3stt/

참고 : 나는 존재 마크 업 작업을 시도하고 그래서 내가 마크 업을 편집 할 수 없습니다 전용으로 CSS와 함께 할 수있는 방법이 필요합니다.

HTML :

<span class="wrapper"> 
    <img src="https://placekitten.com/g/400/300"> 
    <a href="http://google.com">Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google </a> 
</span> 

CSS :

.wrapper { 
    border: 3px solid red; 
    display: inline-block; 
} 
.wrapper img { 
    border: 1px solid blue; 
} 
.wrapper a { 
    display: block; 
    border: 1px solid green; 
} 

Answer 1

는 이미지의 폭에 대한 링크의 텍스트를 포장하는 당신의 의도의 가정, 당신이 할 수있는 것은에 래퍼를 켭니다 표. 그런 다음 width: 1px을 설정하여 너비를 내용의 너비로 만들 수 있습니다.
(이것은 또한 깔끔하게 텍스트의 단어가 이미지보다 넓게 일어나는 사건을 처리합니다.)

.wrapper { 
 
    border: 3px solid red; 
 
    display: table; width: 1px; 
 
} 
 
.wrapper img { 
 
    border: 1px solid blue; 
 
    max-width: calc(100vw - 22px); 
 
} 
 
.wrapper a { 
 
    display: block; 
 
    border: 1px solid green; 
 
}

<span class="wrapper"> 
 
    <img src="https://placekitten.com/g/400/300"> 
 
    <a href="http://google.com">Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google Google </a> 
 
</span>

또한

, 당신이 <span>보다는 <figure>을 사용하는 것이 좋습니다 래퍼 용. 이것은 정확히 <figure>을위한 것입니다.