宽度等于内容[重复]答案

【问题标题】：Width equal to content [duplicate]宽度等于内容[重复]
【发布时间】：2013-12-21 10:14:40
【问题描述】：

我在使用 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>

【问题讨论】：

标签： css width

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以像这样使用 CSS 属性：

div {
    display: inherit;
}

我希望这会有所帮助。

【讨论】：

【解决方案3】：

如果您出于某种原因在 Edge/IE 等浏览器上使用 display: flex 并需要，您可以改为使用：

显示：inline-flex

With ~97% browser support for inline-flex.

【讨论】：

【解决方案4】：

只需使用 display: table;关于你的情况。

【讨论】：

请解释为什么display: table 是正确的选择，以使您的答案更好。查看其他答案以获得更好的想法。

【解决方案5】：

您可以使用 flex 来实现：

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

flex-start 会根据内容自动调整子元素的宽度。

【讨论】：

【解决方案6】：

设置宽度属性为：width: fit-content

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

【讨论】：

【解决方案7】：

尽管使用了display: inline-block。当子元素的宽度设置为父元素的% 时，我的 div 将填充屏幕宽度。如果其他人正在寻找解决方案并且不介意使用屏幕比例而不是父比例，请将% 替换为vw 用于宽度（视口宽度）或vh 用于高度（视口高度）。

【讨论】：

【解决方案8】：

我将宽度设置为最大内容，它对我有用。

width: max-content;

【讨论】：

IE 或 Edge 不支持
caniuse.com/#search=max-content 同意@pkr298 只用于“有趣”的东西——不是生产。
另外，组件会设置宽度，如果浏览器窗口小于该宽度，则不会调整。
@NachoColoma 我现在使用max-width: max-content;，这会恢复容器元素的响应行为。
@pkr298 根据caniuse.com/#search=max-content，Edge 不再是这种情况。

【解决方案9】：

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

您可以通过以下方式更改其显示属性：

#container p {
   display:inline-block;
}

但它将元素并排放置。

要让每个元素单独一行，您可以使用：

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

_{（如果你使用float并且需要在float元素后清除，不同技术见此链接：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/

【讨论】：

看到新的编辑，我恭敬地不同意将<br> 用于样式设置。
@VisWebsoft 我同意你的观点，你总是可以选择使用“浮动”来将每个元素保留在新行中。但总是给出所有可能的解决方案是很好的，只需选择您喜欢的一个。

【解决方案10】：

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

1) 显示：内联块：

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

取消注释该行

 float:left;
 clear:both

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

2) 使用显示：表格

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

【讨论】：

【解决方案11】：

inline-block 的解决方案会强制您在每个元素之后插入 <br>。
float 的解决方案强制您使用“clearfix” div 包装所有元素。

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

使用此解决方案，您无需手动插入换行符（例如 inline-block），您不需要在元素周围使用包装器（例如浮动），并且您可以根据需要将元素居中。

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

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

尝试改用<span> 元素。或者，如果您愿意，请尝试display:inline

【讨论】：

它现在部分工作。段落的宽度等于我想要的内容。问题是现在我将所有段落放在一行而不是三行中。

【解决方案14】：

将display: inline-block; 添加到p 样式应该可以解决问题：

http://jsfiddle.net/pyq3C/

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

【讨论】：

它现在部分工作。段落的宽度等于我想要的内容。问题是现在我将所有段落放在一行而不是三行中。
您可以通过添加强制到下一行：float: left; clear: left;
将float: left 添加到显示为inline-block 的元素将根据CSS 2.1 REC (relationships between display, position, and float) 将其设置为block，因此您也可以删除inline-block，它不会t改变任何东西