CODEWITHSUNDEEP
htmlcssparagraph
user2020058
user2020058

Reputation: 641

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 underneath and center it inside the paragraph's parent div. This is my code that is not working. (It adds the border across the whole div instead of just the paragraph)

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

The paragraph seems to be taking on the width of the parent div. Is there a way to set the paragraph's width to the text it contains? (It seems that margin:auto would work if possible.)

Upvotes: 30

Views: 134133

Answers (8)

Ronaldo Sc
Ronaldo Sc

Reputation: 1

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.

Upvotes: 0

tscpp
tscpp

Reputation: 1566

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>

Upvotes: 0

Tim Kozak
Tim Kozak

Reputation: 4182

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

Upvotes: 0

txpeaceofficer09
txpeaceofficer09

Reputation: 161

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.

Upvotes: 0

G-Cyrillus
G-Cyrillus

Reputation: 105863

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

Upvotes: 6

SlightlyCuban
SlightlyCuban

Reputation: 3255

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.

Upvotes: 59

psniffer
psniffer

Reputation: 113

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>

Upvotes: 0

Phil Sinatra
Phil Sinatra

Reputation: 429

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

Upvotes: 1

Related Questions