How to set paragraph width automatically in CSS?

Question 1

Paragraphs are going to expand to the width of their containers. To make it not do that, you could try:

p { display: inline-block; }

Fiddle with example: http://jsfiddle.net/HuFZL/1/

Also, you may want to wrap the p tags in an additional div, if you need them to clear other paragraphs/elements.

Question 2

if you want paragraph to keep stacking on each other and grow from their content, what you should need is :

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

Question 3

Try adding a width value to your paragraph, otherwise the paragraph will fill the full width of the parent container and the margin values won't do anything:

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

Question 4

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>

Question 5

No, margin auto will not change the size of the paragraph element. It simply attempts to automatically determine the appropriate margin size on the auto-sized sides of the element. Basically, if you want the paragraph to be smaller than the div that contains it you can set a static width of the paragraph(s) as a specific width or a percentage of the parent element's inner width. Another option if you do not want to do any static sizing of the paragraph(s) would be to set padding on the parent element or set static margins on the paragraph(s).

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

This would make all the paragraphs center inside the div and be 40px smaller assuming the paragraphs don't have 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 then:

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 then this will work. If you have 2 words in the paragraph then it won't be only as wide as the text. The only way to pull that off would be with an inline element like a span or an element that has been set to display: inline;, but inline elements will get jumbled up side-by-side unless you put a block element between them.

Question 6

Bullet proof way

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; 
}

Question 7

You can use span to automatic set the width.

I suppose it must not be a paragraph?

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>

Question 8

Just set this will work for p block type :

.fit-block-content p {
    max-width: fit-content;
}

In this way doesn't need adding a parent div.