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


87

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.

1
pouvez-vous mettre votre code dans jsfiddle?
Hardik

Je pense que vous devez être un peu plus clair sur vos intentions ici. Si vous ne voulez pour envelopper alors pas de texte , vous pouvez simplement utiliser white-space: nowrap;dans li span {...}, mais je l'impression que vous essayez de faire quelque chose d' autre
My Head Hurts

@MyHeadHurts Excuses - m'a semblé clair :) Je veux deux colonnes dans la ligne. Le 20px de gauche est pour une image. Le reste est pour le texte. Si le texte s'enroule, je veux qu'il commence la deuxième ligne de l'habillage 20px à partir de la gauche (sous le début du texte initial).
Nick

1
Pour les passants, vous n'avez pas besoin de gérer les largeurs comme le suggère la réponse acceptée. C'est beaucoup plus simple: créez ce qu'on appelle un nouveau contexte de formatage . Voir la réponse de Joe Conlin. Pour plus d'informations, voir le mien.
hqcasanova

1
@hqcasanova Pour mémoire, la réponse de Dan a été acceptée 9 mois avant que Joe ne publie la sienne et 16 mois avant vous la vôtre. Je ne vais pas rejeter la réponse de Dan, bien que merci d'avoir ajouté des alternatives.
Nick

Réponses:


35

É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}

Ceci est vraiment utile. J'ai changé le spanen un pélément. Alors que ces deux semblait faire l'affaire: li p {margin-left: 40px} .fav_star {float: left}. La largeur de l'image est définie par l'image elle-même, l' pélément est automatiquement a blocket j'ai laissé la largeur seule. Merci pour cela.
Nick

2
Si vous display:blockcomptez utiliser, vous pouvez tout aussi bien utiliser a divpuisque c'est à cela qu'il sert (ou utiliser a pcomme vous le suggérez également). Il n'est pas nécessaire de doubler le texte - si vous utilisez un, pvous pouvez perdre le span.
Gareth

OMI, vous ne devez pas utiliser HTML pour modifier la conception de vos pages. C'est le travail de CSS (il y a bien sûr des exceptions, spécialement lorsque vous avez besoin d'une compatibilité entre navigateurs). Je crois qu'utiliser du HTML approprié et avoir une «bonne sémantique» est plus important. Donc, je n'utiliserais pas a div, dans ce cas, a a pplus de sens. Perdre le spanest un peu trivial pour moi et dépend de la manière dont vous présentez votre contenu.
Dan

Emballer un <span>dans une <p>sorcellerie est tout droit sorti de Hogwartz! Fonctionne à merveille!
Janus

252

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/


11
C'est la bonne réponse à cette question. Cette technique ne nécessite pas de définir une largeur fixe pour le paragraphe. Solution beaucoup plus simple et plus facile. Fonctionne parfaitement, même dans IE8.
chocolata

4
Eh bien, en fait, cela ne fonctionnera pas si l'élément contenant le texte était un span(le cas de l'OP). Un display: blockserait nécessaire pour le span. Mais, en gardant cela, je suis d'accord que c'est une solution beaucoup plus élégante. Au cas où quelqu'un se demanderait quelle est la magie derrière overflow: hidden, voir ma réponse ci-dessous.
hqcasanova

7
Ce n'est pas le comportement auquel je m'attendais, mais c'est génial.
Gavin

2
Pour mémoire, cette réponse est venue 8 mois après celle que j'ai cochée :)
Nick

2
Sensationnel. A parfaitement fonctionné. Je ne peux pas croire que je ne l'ai jamais su avant.
SFlagg

25

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

1
Pouvez-vous ajouter quelques détails de cet article dans votre réponse, au cas où le lien disparaîtrait?

Bonjour Australie! Merci pour le commentaire.
hqcasanova

C'est excellent pour afficher des blocs de code qui pourraient avoir à faire face à des images ou à des barres latérales flottantes à proximité.
AlexMA

La technique telle que décrite à l'origine fonctionne bien, bien que, comme d'autres l'ont dit, ce n'est pas un comportement auquel je m'attendrais. Cependant, je ne vois pas que les flottants ou les blocs en ligne fonctionnent sans débordement, et bien sûr, les valeurs d'affichage et la position absolue ou fixe liées aux tables ont d'autres conséquences de mise en page qui peuvent ou non être acceptables dans le contexte.
énigment le

3

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


Probablement besoin vertical-align: top;sur l'image avec cela aussi.
ThinkingStiff

2

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


Cela semble être un équivalent plus moderne du cadre overflow:auto. Je suis sûr que cela ne fonctionne pas exactement de la même manière dans toutes les situations, mais cela a également fonctionné pour moi.
Matt Browne

1

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%;
            }
        }
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.