comma CSS min larghezza quando l'involucro intorno alle immagini

Question

Si consideri il seguente CSS/HTML:

img.text-wrap-left { 
 
    float:left; 
 
}

<p> 
 
    <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam. 
 

 
Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit. 
 
</p>

quando la finestra viene ridimensionata, il testo scorrerà a destra dell'immagine, ma diventerà anche molto stretto, al punto di avere anche solo poche lettere.

E 'possibile specificare la larghezza minima del testo prima che il paragrafo vada interamente sotto l'immagine, il tutto senza sacrificare paddings e margini?

In questo esempio, una soluzione semplice sarebbe aggiungere una condizione CSS media e comunicare l'immagine a display:block; con una certa larghezza. Il problema è che questo è solo un esempio; il mio problema è che le immagini che sono usate con il testo possono avere larghezze variabili (cioè sono definite dall'utente) e sto cercando una soluzione reattiva.

Qualche idea?

Answer 1

Penso che l'opzione migliore sia quella di utilizzare max-width sull'immagine per mantenere la larghezza massima a qualche% e quindi aggiungere anche la query multimediale per interrompere il testo su una nuova riga in qualche punto. Fiddle

img.text-wrap-left { 
 
    float:left; 
 
    max-width: 50%; 
 
} 
 
@media(max-width: 480px) { 
 
    img.text-wrap-left { 
 
    display: block; 
 
    float: none; 
 
    max-width: 100%; 
 
    } 
 
}

<p> 
 
    <img class="text-wrap-left" src="//lh3.googleusercontent.com/ZUMt7sn_FTLfvRK-B4XHK46Zyxv4kaj4O60tVXVMAg2m8Ohj0CdfinbEUmkwzaGmUE8V0jmKXHxSOvegEk3M3urVLsEbAzzmpwj-kDs=s660" width="550"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras a ultrices est. Morbi semper enim sit amet feugiat fermentum. Phasellus odio lorem, finibus sit amet nibh ut, lobortis scelerisque nisl. Vestibulum mattis, ligula vitae sodales maximus, metus arcu egestas ex, non ullamcorper leo metus et mi. Integer libero justo, commodo a augue et, tempus aliquam leo. Donec ac ex aliquet, auctor erat sit amet, gravida metus. Duis vel condimentum dolor. Maecenas id consequat massa, vel dictum turpis. Cras dignissim aliquet mauris eu facilisis. Donec malesuada arcu in nulla commodo aliquam. 
 

 
Nunc in est eget justo fringilla blandit. Morbi leo nisl, sagittis nec nulla ut, accumsan tristique orci. Praesent quis nisl pharetra, tempus nisi ornare, laoreet velit. Aliquam at dolor at eros elementum rutrum. Quisque tincidunt tincidunt nisi id porta. Cras hendrerit egestas leo, sed ultrices lorem dapibus et. Duis consectetur nisi eget ligula condimentum malesuada. Sed venenatis nisi id facilisis vestibulum. Nam tristique massa quis ornare blandit. Vivamus lobortis orci velit. 
 
</p>