CSS pour arrêter l'habillage du texte sous l'image

J'ai le balisage suivant:

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <span>Text, text and more text</span>
</li>

Je le veux pour que si le texte s'habille, il n'entre pas dans la «colonne» de l'image. Je sais que je peux le faire avec un table(ce que je faisais) mais ce n'est pas réalisable pour cette raison .

J'ai essayé ce qui suit sans succès:

li span {width: 100px; margin-left: 20px}
.fav_star {width: 20px}

J'ai aussi essayé float: right.

Merci.

EDIT: Je veux que cela ressemble à ceci:

IMG   Text starts here and keeps going... and
      wrap starts here.

Pas comme ça:

IMG   Text starts here and keeps going... and 
wrap starts in the space left for the image.

Étant donné que cette question gagne beaucoup de points de vue et que c'était la réponse acceptée, j'ai ressenti le besoin d'ajouter l'avertissement suivant:

Cette réponse était spécifique à la question du PO (qui avait la largeur définie dans les exemples). Pendant que cela fonctionne, il vous faut avoir une largeur sur chacun des éléments, l'image et le paragraphe. À moins que ce ne soit votre exigence, je recommande d'utiliser la solution de Joe Conlin qui est publiée comme une autre réponse à cette question.

L' spanélément est un élément en ligne, vous ne pouvez pas changer sa largeur en CSS.

Vous pouvez ajouter le CSS suivant à votre span afin de pouvoir modifier sa largeur.

display: block;

Une autre façon, qui a généralement plus de sens, consiste à utiliser un <p>élément comme parent pour votre <span>.

<li id="CN2787">
  <img class="fav_star" src="images/fav.png">
  <p>
     <span>Text, text and more text</span>
  </p>
</li>

Puisqu'il <p>s'agit d'un blockélément, vous pouvez définir sa largeur en utilisant CSS, sans rien changer.

Mais dans les deux cas, puisque vous avez un élément de bloc maintenant, vous devrez faire flotter l'image afin que votre texte ne passe pas tout en dessous de votre image.

li p{width: 100px; margin-left: 20px}
.fav_star {width: 20px;float:left}

PS Au lieu de float:leftl'image, vous pouvez aussi mettre float:rightsur , li pmais dans ce cas, vous aurez également besoin text-align:leftde réaligner le texte correctement.

PSS Si vous avez opté pour la première solution consistant à ne pas ajouter d' <p>élément, votre CSS devrait ressembler à ceci:

li span{width: 100px; margin-left: 20px;display:block}
.fav_star {width: 20px;float:left}

Réponse très simple à ce problème qui semble attraper beaucoup de monde:

<img src="url-to-image">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

    img {
        float: left;
    }
    p {
        overflow: hidden;
    }

Voir exemple: http://jsfiddle.net/vandigroup/upKGe/132/

Pour ceux qui veulent des informations générales, voici un court article expliquant pourquoi cela overflow: hiddenfonctionne. Cela a à voir avec le soi-disant contexte de formatage de bloc . Cela fait partie de la spécification du W3C (c'est-à-dire n'est pas un hack) et est essentiellement la région occupée par un élément avec un flux de type bloc.

Chaque fois qu'il est appliqué, overflow: hiddencrée un nouveau contexte de formatage de bloc. Mais ce n'est pas la seule propriété capable de déclencher ce comportement. Citant une présentation de Fiona Chan de Sydney Web Apps Group:

• float: gauche / droite
• débordement: caché / automatique / défilement
• affichage: cellule-table et toutes valeurs liées à la table / bloc en ligne
• position: absolue / fixe

Si vous voulez que le margin-lefttravail sur un spanélément, vous devrez le faire display: inline-blockou display:blockaussi.

le réglage display:flexdu texte a fonctionné pour moi.

Enroulez un div autour de l'image et de la plage et ajoutez ce qui suit au CSS comme suit:

HTML

        <li id="CN2787">
          <div><img class="fav_star" src="images/fav.png"></div>
          <div><span>Text, text and more text</span></div>
        </li>

CSS

            #CN2787 > div { 
                display: inline-block;
                vertical-align: top;
            }

            #CN2787 > div:first-of-type {
                width: 35%;
            }

            #CN2787 > div:last-of-type {
                width: 65%;
            }

MOINS

        #CN2787 {
            > div { 
                display: inline-block;
                vertical-align: top;
            }

            > div:first-of-type {
                width: 35%;
            }
            > div:last-of-type {
                width: 65%;
            }
        }