Html 如何在 CSS 中自动设置段落宽度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17175563/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to set paragraph width automatically in CSS?
提问by user2020058
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 divinstead of just the paragraph)
这是交易。与其只是在我的段落下划线并使用text-align，我想在下方添加一个虚线边框并将其居中放置在段落的父级中div。这是我的代码不起作用。（它在整个div而不是段落中添加了边框）
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:autowould work if possible.)
该段落似乎采用了 parent 的宽度div。有没有办法将段落的宽度设置为它包含的文本？（margin:auto如果可能的话，这似乎会奏效。）
回答by SlightlyCuban
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/
摆弄示例：http: //jsfiddle.net/HuFZL/1/
Also, you may want to wrap the ptags in an additional div, if you need them to clear other paragraphs/elements.
此外，如果您需要它们来清除其他段落/元素，您可能希望将p标签包装在一个额外的 中div。
回答by G-Cyrillus
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;
}
回答by Phil Sinatra
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 */
}
回答by psniffer
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>
回答by txpeaceofficer09
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，您可以将段落的静态宽度设置为特定宽度或父元素内部宽度的百分比。如果您不想对段落进行任何静态大小调整，另一种选择是在父元素上设置填充或在段落上设置静态边距。
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 内居中，假设段落没有边距，则小 40px。
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.
假设文本填充了段落元素，那么这将起作用。如果段落中有 2 个单词，那么它的宽度不会仅与文本一样宽。实现这一点的唯一方法是使用内联元素，例如 span 或已设置为 的display: inline;元素，但内联元素会并排混在一起，除非您在它们之间放置块元素。
回答by comonitos
Bullet proof way
防弹方式
HTML
HTML
<div class="container">
<p><p>
</div>
CSS
CSS
.container { text-align:center; }
.container p {
display: table;
margin:0 auto;
display: inline-block;
zoom: 1;
*display: inline;
}
回答by Elias
You can use span to automatic set the width.
您可以使用 span 来自动设置宽度。
I suppose it must not be a paragraph?
我想它一定不是一个段落？
CSS:
CSS：
.container {
width: 100%;
height: auto;
background: #ff0000;
text-align: center;
}
.myText {
width: auto;
background: #ffff00;
}
HTML:
HTML：
<div class="container">
<span class="myText">Hello</span>
</div>
