宽度等于内容

Question

我在使用CSS的width属性时遇到了一些麻烦.我在div中有一些段落.我想让段落的宽度等于它们的内容,以便它们的绿色背景看起来像文本的标签.我得到的是段落继承了更宽的div父节点的宽度.

#container {
  width: 30%;
  background-color: grey;
}

#container p {
  background-color: green;
}

<div id="container">
  <p>Sample Text 1</p>
  <p>Sample Text 2</p>
  <p>Sample Text 3</p>
</div>

Answer 1

默认情况下,p标签是block元素,这意味着它们占用父项的100%width.

您可以使用以下命令更改其display属性:

#container p {
   display:inline-block;
}

但它将这些要素并排放在一起.

要将每个元素保留在自己的行上,您可以使用:

#container p {
   clear:both;
   float:left;
}

_{(如果您使用浮动并需要在浮动元素后清除,请参阅此链接以了解不同的技术:http://css-tricks.com/all-about-floats/)}

演示:http://jsfiddle.net/CvJ3W/5/

编辑

如果您选择解决方案,display:inline-block但希望将每个项目保留在一行中,则可以在每个项目<br>之后添加一个标记:

<div id="container">
  <p>Sample Text 1</p><br/>
  <p>Sample Text 2</p><br/>
  <p>Sample Text 3</p><br/>
</div>

新演示:http://jsfiddle.net/CvJ3W/7/

Answer 2

我将宽度设置为max-content,它对我有用.

width: max-content;

Answer 3

添加display: inline-block;到p造型应该好好利用这个:

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}

Answer 4

inline-block强制您<br>在每个元素后插入的解决方案.
该解决方案float强制您使用"clearfix"div包装所有元素.

另一个优雅的解决方案是display: table用于元素.

使用此解决方案,您无需手动插入换行符(如同inline-block),您不需要在元素周围使用包装(如浮点数),并且可以根据需要将元素置于中心位置.

http://jsfiddle.net/8md3jy4r/3/

Answer 5

使用 display:inline-block; 行不通的长句不一样的空间HiHowAreYouHopeYouAreDoingGood...etc来解决这个考虑使用word-wrap: break-word;替代

它是为了让长词能够断行并换行到下一行。Facebook也在使用它

例子

#container {
    width: 40%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#container p{
    display:inline-block;
    background-color: green;
}
.flex{
    display: flex;
}

#wrap {
    width: 30%;
    background-color: grey;
    overflow:hidden;
    margin:10px;
}
#wrap p{
   word-wrap: break-word;
    background-color: green;
}

<h1> display:inline-block;</h1>
<div class='flex'>

<div id="container">
<h5>With spaces </h5>
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>

<div id="container">
  <h5>No specaes (not working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>




<h1>  word-wrap: break-word;</h1>
<div class='flex'>

<div id="wrap">
<h5>With spaces </h5>
    <p>Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1 Sample Text 1</p>
</div>

<div id="wrap">
  <h5>No specaes (working )</h5>  <p>HiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGoodHiHowAreYouHopeYouAreDoingGood</p>
</div>
</div>

Answer 6

设置display:inline-block然后调整您的边距。

在这里小提琴：http : //jsfiddle.net/Q2MrC/

Answer 7

您可以使用以下任何一种：-

1）显示：内联块：

http://jsbin.com/feneni/edit?html,css,js,output

取消注释该行

 float:left;
 clear:both 

你会发现父容器已经折叠。

2）使用显示：表

http://jsbin.com/dujowep/edit?html,css,js,output

Answer 8

将width属性设置为：width：fit-content

demo: http://jsfiddle.net/rvrjp7/pyq3C/114

Answer 9

您可以使用 flex 来实现这一点：

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

flex-start会自动调整子项的宽度以适应其内容。