如何在 CSS 中自动设置段落宽度？答案

【问题标题】：How to set paragraph width automatically in CSS?如何在 CSS 中自动设置段落宽度？
【发布时间】：2013-06-15 01:29:39
【问题描述】：

这是交易。我不只是在我的段落下划线并使用text-align，而是想在下面添加一个虚线边框并将其居中在段落的父级div 内。这是我的代码不起作用。（它在整个div 上添加了边框，而不仅仅是段落）

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

该段落的宽度似乎与父 div 相同。有没有办法将段落的宽度设置为它包含的文本？（如果可能的话，margin:auto 似乎可以工作。）

【问题讨论】：

标签： html css paragraph

【解决方案1】：

您可以使用 span 自动设置宽度。

我想它一定不是段落？

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>

【讨论】：

【解决方案2】：

防弹方式

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

【讨论】：

第二个显示值不会覆盖第一个吗？

【解决方案3】：

不，margin auto 不会改变段落元素的大小。它只是尝试在元素的自动调整大小的边上自动确定适当的边距大小。基本上，如果您希望段落小于包含它的 div，您可以将段落的静态宽度设置为特定宽度或父元素内部宽度的百分比。如果您不想对段落进行任何静态调整大小，另一种选择是在父元素上设置填充或在段落上设置静态边距。

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

这将使所有段落在 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. */
}

如果你希望边框正好是文本的宽度，那么：

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

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

假设文本填充段落元素，那么这将起作用。如果段落中有 2 个单词，那么它就不会和文本一样宽。实现这一点的唯一方法是使用像 span 这样的内联元素或设置为 display: inline; 的元素，但内联元素会并排混乱，除非你在它们之间放置一个块元素。

【讨论】：

【解决方案4】：

如果您希望段落彼此堆叠并从其内容中增长，您应该需要的是：

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

【讨论】：

【解决方案5】：

段落将扩展到其容器的宽度。为了让它不这样做，你可以尝试：

p { display: inline-block; }

举个例子：http://jsfiddle.net/HuFZL/1/

此外，如果您需要将p 标签包装在额外的div 中，以清除其他段落/元素。

【讨论】：

【解决方案6】：

这是我尝试过的......

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

【讨论】：

【解决方案7】：

尝试为您的段落添加宽度值，否则该段落将填满父容器的整个宽度，并且边距值不会做任何事情：

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

【讨论】：

感谢您的回复，但是对于一个较小的段落会留下比文本更长的边框。我正在寻找一种让边框只跨越文本宽度的方法。
使用最大宽度值而不是指定宽度怎么样？您可以发布所有代码或制作 Fiddle 吗？