web-dev-qa-db-fra.com

Comment définir automatiquement la largeur de paragraphe en CSS?

Voici le deal. Au lieu de simplement souligner mon paragraphe et d'utiliser text-align, je souhaite ajouter une bordure en pointillé en dessous et la centrer à l'intérieur du parent du paragraphe div. Ceci est mon code qui ne fonctionne pas. (Il ajoute la bordure sur toute la div au lieu du seul paragraphe)

p {
  border-bottom:1px dotted;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

Le paragraphe semble prendre la largeur du parent div. Existe-t-il un moyen de définir la largeur du paragraphe sur le texte qu'il contient? (Il semble que margin:auto fonctionnerait si possible.)

htmlcssparagraph
12
user2020058

Les paragraphes vont s'étendre à la largeur de leurs conteneurs. Pour éviter que cela ne se produise, vous pouvez essayer:

p { display: inline-block; }

Violonez avec l'exemple: http://jsfiddle.net/HuFZL/1/

En outre, vous pouvez également envelopper les balises p dans une div supplémentaire, si vous en avez besoin pour supprimer d'autres paragraphes/éléments.

34
SlightlyCuban

si vous voulez que les paragraphes s’empilent les uns sur les autres et grandissent à partir de leur contenu, il vous faut:

p { 
      display: table;
      margin:auto;
      border-bottom:1px dotted;
}
4
G-Cyr

Essayez d’ajouter une valeur de largeur à votre paragraphe, sinon le paragraphe remplira toute la largeur du conteneur parent et les valeurs de marge ne feront rien:

p {
  border-bottom:1px dotted;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  width: 100px; /* whatever width you want */
}
1
Phil Sinatra

Non, margin auto ne changera pas la taille de l'élément de paragraphe. Il tente simplement de déterminer automatiquement la taille de la marge appropriée sur les côtés auto-dimensionnés de l'élément. En gros, si vous souhaitez que le paragraphe soit plus petit que la div qui le contient, vous pouvez définir une largeur statique du ou des paragraphes en tant que largeur spécifique ou en pourcentage de la largeur intérieure de l'élément parent. Une autre option si vous ne souhaitez pas effectuer de dimensionnement statique du ou des paragraphes consiste à définir le remplissage sur l'élément parent ou les marges statiques sur le ou les paragraphes.

div.paragraph-container {
    padding: 20px; /* or padding: 20px 20px 20px 20px; sets all the padding individually (top, right, bottom, left) */
}

Cela ferait que tous les paragraphes seraient centrés à l'intérieur de la div et 40px plus petits en supposant que les paragraphes n'aient pas de marges.

div.paragraph-container p {
    margin: 10px 20px; /* sets the margin on the paragraph(s) to 10px on top and bottom and 20px on left and right which does the same as the first example assuming that the div does not have padding. */
}

Si vous voulez que la bordure soit exactement la largeur du texte, alors:

div.paragraph-container p {
    border-bottom: 1px dotted black;
    padding: 0px 0px 5px 0px;
    margin: 10px 20px;
}

div.paragraph-container {
    padding: 0px;
}

En supposant que le texte remplisse l'élément de paragraphe, cela fonctionnera. Si vous avez 2 mots dans le paragraphe, il ne sera pas aussi large que le texte. La seule façon de procéder consiste à utiliser un élément en ligne, comme une étendue ou un élément défini sur display: inline;, mais les éléments en ligne seront mélangés côte à côte, sauf si vous mettez un élément de bloc entre eux.

0
txpeaceofficer09

Vous pouvez utiliser span pour définir automatiquement la largeur.

Je suppose que ce ne doit pas être un paragraphe?

CSS:

.container {
   width: 100%;
   height: auto;
   background: #ff0000;
   text-align: center;
}

.myText {
   width: auto;
   background: #ffff00;
}

HTML:

<div class="container">
    <span class="myText">Hello</span>
</div>
0
Elias

C'est ce que j'ai essayé ....

<html>

<style>
{
border-bottom:1px dotted;
margin-left:auto;
margin-right:auto;
text-align:center;
}

#custom
{
width : 10px;
}

</style>

<div id="custom"><p>dddd</p></div>

</html>
0
psniffer

Manière à l'épreuve des balles

HTML

<div class="container">
 <p><p>
</div>

CSS

.container { text-align:center; }
.container p { 
  display: table;
  margin:0 auto;
  display: inline-block; 
  zoom: 1; 
  *display: inline; 
}
0
comonitos