web-dev-qa-db-fra.com

Largeur égale au contenu

Je rencontre des problèmes avec la propriété width de CSS. J'ai quelques paragraphes à l'intérieur d'un div. J'aimerais que la largeur des paragraphes corresponde à leur contenu, afin que leur arrière-plan vert ressemble à une étiquette pour le texte. Ce que j’obtiens à la place, c’est que les paragraphes héritent de la largeur du noeud père div, plus large. 

#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}
<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>

csswidth
61
user3067088

Par défaut, les balises p sont des éléments block, ce qui signifie qu'elles prennent 100% du parent width. 

Vous pouvez modifier leur propriété d'affichage avec:

#container p {
   display:inline-block;
}

Mais cela met les éléments côte à côte.

Pour conserver chaque élément sur sa propre ligne, vous pouvez utiliser:

#container p {
   clear:both;
   float:left;
}

(Si vous utilisez float et devez effacer les éléments flottants, consultez ce lien pour connaître différentes techniques: http://css-tricks.com/all-about-floats/

Démo: http://jsfiddle.net/CvJ3W/5/

Modifier 

Si vous optez pour la solution avec display:inline-block mais que vous souhaitez conserver chaque élément sur une ligne, vous pouvez simplement ajouter une balise <br> après chaque élément:

<div id="container">
  <p>Sample Text 1</p><br/>
  <p>Sample Text 2</p><br/>
  <p>Sample Text 3</p><br/>
</div>

Nouvelle démo: http://jsfiddle.net/CvJ3W/7/

106
DaniP

J'ai réglé la largeur sur max-content et cela a fonctionné pour moi.

width: max-content;

53
Sarneet Kaur

Ajouter display: inline-block; au style p devrait en prendre:

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}
8
Stuart Kershaw

La solution avec inline-block vous oblige à insérer <br> après chaque élément.
La solution avec float vous oblige à envelopper tous les éléments avec "clearfix" div.

Une autre solution élégante consiste à utiliser display: table pour les éléments.

Avec cette solution, vous n'avez pas besoin d'insérer des sauts de ligne manuellement (comme avec inline-block), vous n'avez pas besoin d'un wrapper autour de vos éléments (comme avec des flottants) et vous pouvez centrer votre élément si vous en avez besoin.

http://jsfiddle.net/8md3jy4r/3/

6
Ruslan Stelmachenko

Définissez display:inline-block, puis ajustez vos marges.

violon ici: http://jsfiddle.net/Q2MrC/

4
sn3ll

définir l'attribut width comme suit: width: fit-content

demo:http://jsfiddle.net/rvrjp7/pyq3C/114

4
RVRJ

Vous pouvez utiliser l'un des éléments ci-dessous: -

1) affichage: bloc en ligne:

http://jsbin.com/feneni/edit?html,css,js,output

Ne commentez pas la ligne

 float:left;
 clear:both

et vous constaterez que le conteneur parent s'est effondré.

2) Utilisation de l'affichage: table

http://jsbin.com/dujowep/edit?html,css,js,output

4
satyam kumar

Essayez plutôt d’utiliser un élément <span> </ code>. Ou si vous préférez, essayez display:inline

1
Testare

Vous pouvez utiliser flex pour y parvenir:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

flex-start ajustera automatiquement la largeur des enfants à leur contenu.

1
Nacho Coloma

utilisez simplement display: table; sur votre cas.

0
was

Malgré l'utilisation de display: inline-block. Mon div remplissait la largeur de l'écran lorsque la largeur des éléments enfants était définie sur % du parent. Si quelqu'un d'autre recherche une solution à ce problème et que l'utilisation de la proportion d'écran à la place de la proportion parent ne dérange pas, remplacez le % par vw pour la largeur (Viewport Width) ou vh pour la hauteur (Viewport Height).

0
Chris Hayes

Si vous utilisez display: flex pour une raison quelconque et que vous avez besoin de navigateurs comme Edge/IE, vous pouvez utiliser à la place:

affichage: inline-flex

Avec ~ 97% de support du navigateur pour inline-flex.

0
youngrrrr

En utilisant display:inline-block;, cela ne fonctionnera que pour une phrase correcte avec espaces comme

#container {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
    display:inline-block;
    background-color: green;
}
<h5>Correct sentence with spaces </h5>
<div id="container">
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<h5>No specaes (not working )</h5>
<div id="container">
    <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>
</div>

Pourquoi ne pas utiliser Word-wrap: break-Word;? il est fait pour permettre aux mots longs de pouvoir se briser et de passer à la ligne suivante.

#container {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
   Word-wrap: break-Word;
    background-color: green;
}
<h5> Correct sentence with spaces </h5>
<div id="container">
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>
<h5>No specaes</h5>
<div id="container">
    <p>SampleSampleSampleSampleSampleSampleSampleSampleSampleSampleSamplesadasdsadasdasdsa</p>
</div>

0
Liam