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>
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/
J'ai réglé la largeur sur max-content et cela a fonctionné pour moi.
width: max-content;
Ajouter display: inline-block;
au style p
devrait en prendre:
#container p{
background-color: green;
display: inline-block;
}
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.
Définissez display:inline-block
, puis ajustez vos marges.
violon ici: http://jsfiddle.net/Q2MrC/
définir l'attribut width comme suit: width: fit-content
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
Essayez plutôt d’utiliser un élément <span>
</ code>. Ou si vous préférez, essayez display:inline
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.
utilisez simplement display: table; sur votre cas.
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).
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
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>