Geek Answers Handbook

How to set paragraph width automatically in CSS?

Here's the deal. Instead of just underlining my paragraph and using text-align , I want to add a dotted border below it and center it inside the parent paragraph of the div . This is my code that does not work. (It adds a border throughout the div , not just the paragraph)

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

This paragraph seems to take the width of the parent div . Is there a way to set the width of a paragraph in the text that it contains? (It seems that margin:auto will work, if possible.)

+8
html css paragraph
source share
6 answers

Items will expand to the width of their containers. To do this, you cannot try:

 p { display: inline-block; }

Sample script: http://jsfiddle.net/HuFZL/1/

In addition, you can wrap p tags in an additional div if you need to clear other paragraphs / elements.

+28
source share

if you want the paragraph to continue to stack and grow out of their contents, you need to:

 p { display: table; margin:auto; border-bottom:1px dotted; }
+4
source share

Try adding the width value to your paragraph, otherwise the paragraph will fill the entire width of the parent container, and the field values ​​will do nothing:

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

This is what I tried ....

 <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
source share

No, auto margin will not resize a paragraph element. It just tries to automatically determine the appropriate field size in areas with an automatic element size. Basically, if you want a paragraph to be smaller than the div containing it, you can set the static width of the paragraph (s) as a specific width or percentage of the inner width of the parent element. Another option, if you do not want to make the static size of the paragraph (s), should be to install an addition to the parent element or set static fields in the paragraphs.

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

This will make all paragraphs centered inside the div and will be 40 pixels smaller if paragraphs have no margins.

 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. */ }

If you want the border to be exactly the width of the text, follow these steps:

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

Assuming the text fills the paragraph element, this will work. If there are 2 words in a paragraph, it will not be as wide as the text. The only way to pull this out is with an inline element, such as a span or an element that has been set to display: inline; , but inline elements will be mixed side by side unless you place a block element between them.

0
source share

Bulletproof method

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
source share

More articles:


All Articles