web-dev-qa-db-fra.com

CSS: Est-il exact que le contenu textuel d'une div déborde dans le remplissage?

Je m'attendais à ce que le remplissage à l'intérieur d'un div reste vide de tout texte. Mais étant donné le html/css suivant, le contenu-texte déborde dans le remplissage;

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 50px;
  border: 1px solid green;
}

Le texte déborde de sa taille de 50 pixels et dans le remplissage de 10 pixels. Est-ce par conception? Si c'est le cas, cela semble assez stupide - le rembourrage n'est pas du rembourrage s'il contient des trucs! Ou est-ce que je fais juste quelque chose de mal?

Cordialement, CSS novice.

cssoverflowpaddinghidden
36
Nigel Alderton

C'est le comportement correct. overflow: hidden découpera le contenu qui s'étend en dehors de la zone . Le remplissage est à l'intérieur la boîte, donc le contenu débordera volontiers dans cet espace si nécessaire.

CSS Box model
(source)

Pour obtenir l'effet que vous semblez viser, une solution consiste à envelopper votre div.foo dans un autre div et à définir l'arrière-plan à la place, comme ceci:

<div class="foowrapper">
    <div class="foo">purrrrrrrrr</div>
</div>

.foo {
    overflow: hidden;
    width: 40px;
}
.foowrapper {
    padding-right: 10px
    background: red;
    border: 1px solid green;
}
150
Brant Bobby

C'est parce que vous avez contraint la largeur du div à 50px provoquant le déversement du texte dans le rembourrage. Supprimez cette déclaration de largeur et le div se développera et se contractera avec la taille du txt qu'il contient.

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;

  border: 1px solid green;
}

J'espère que cela vous aide.

4
wilsonpage

Pour ce faire, j'ai créé deux divisions: une principale et une enveloppe. J'ai fini par définir une hauteur pour la div principale intérieure et cacher le trop-plein, et cela a résolu le problème. Voici le code:

div.wrap {
  padding: 10px 10px 14px 10px;
  border:1px solid #000000;
  width: 200px;
  height: 70px; 
 }
div.main { 
  line-height: 1.3em;
  overflow:hidden; 
  width: 200px;
  height: 60px; /* PLAY WITH THE HEIGHT so that you can essentially use it to cover up the overflow */
 }

  <div class="wrap"><div class="main">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor labore et dolore magna aliqua. Ut enim ad minim veniam.</div></div>

L'encapsuleur a le remplissage et la bordure (entre autres attributs). Le principal a une hauteur et l'attribut de débordement - ce sont ceux qui résolvent le problème. N'hésitez pas à tester et vous verrez que peu importe le nombre de mots ajoutés à la div principale, ils ne seront pas affichés partiellement ou pas du tout. Cross-browser aussi.

4
seon

La seule façon dont je pouvais voir ce fonctionnement est de se débarrasser de la largeur: 50px ... à part ça, je suis perplexe!?

3
benhowdle89

Une autre approche consiste à utiliser un contour-droit comme pseudo-remplissage. Réduisez d'abord la largeur de votre élément de 10 pixels (pour tenir compte de la quantité supplémentaire, le contour s'étendra). Ajoutez ensuite un contour rouge uni de 10 pixels à droite de votre élément. Le contour couvrira tout texte "caché".

S'il y a des éléments qui apparaissent à droite de foo, assurez-vous d'ajouter 10px à sa marge droite (car le contour ne les repoussera pas comme une extension de largeur normale le ferait).

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 10px;
  width: 40px;
  border: 1px solid green;
  outline-right: 10px solid red;
  margin-right: 10px;

}
1
user1050268

J'ai également rencontré ce problème et je n'aime pas la façon dont cela fonctionne. Peu importe la taille du chat, le rembourrage sera toujours entre lui et la boîte! Par conséquent, lorsque vous utilisez overflow: hidden, le contenu doit être masqué lorsqu'il atteint le remplissage.

Voici un hack qui ne fonctionne pas au cas où vous voudriez une bordure, mais qui pourrait pour certains (moi): utiliser les bordures comme rembourrage.

<div class="foo">helloworld</div>

.foo {
  float: left;
  overflow: hidden;
  background: red;
  padding-right: 0; /* Removed the padding. */
  width: 50px;
  border-right: 10px solid red; /* 10px, background color or transparent. */
  box-sizing: border-box; /* I prefer this one too.. */
}
1
LGT

C'est par conception comme overflow: hidden utilise la bordure comme clip pour que le contenu coule dans le rembourrage.

Vous pouvez utiliser ici une ombre de boîte qui est de la même couleur que votre arrière-plan pour générer un faux remplissage dans lequel le texte ne coulera pas.

box-shadow: 0px 0px 0px 5px black;

Vous devrez ajuster les marges et le rembourrage pour en tenir compte, mais c'est la solution la plus indolore que j'ai trouvée jusqu'à présent.

0
mcphylus12