logo标签列表

宽度等于内容

csswidth
151

我在使用CSS的宽度属性时遇到了一些问题。我有些段落在一个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>

14个回答
218

我将宽度设置为最大内容宽度，这很适用于我。

width: max-content;

9
不支持IE和Edge浏览器。 - pkr
1
https://caniuse.com/#search=max-content 同意@pkr298的看法，只用于“有趣”的东西 - 不要用于生产。 - CodeFinity
1
此外，该组件将设置宽度，如果浏览器窗口小于该宽度，则不会进行调整。 - Nacho Coloma
这正是我所寻找的。简单明了。 - Tanzeel
2
@NachoColoma 我现在使用 max-width: max-content;，这样可以恢复容器元素的响应式行为。 - honk31
3
@pkr298 根据 https://caniuse.com/#search=max-content，Edge浏览器不再是这种情况。 - Maxie Berkmann
168

默认情况下，p 标签是块级元素（block elements），这意味着它们占据了父元素的 100% 宽度。

您可以使用以下属性更改其显示方式：

#container p {
   display:inline-block;
}

但它会把元素并排放置。

如果想让每个元素单独占一行，可以使用：

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

(如果您使用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/

4
看到这个新的编辑，我非常不赞成为了样式而使用<br>标签。 - CodeFinity
1
@VisWebsoft 我同意你的观点，你始终可以使用´float´来使每个元素在新行中保持。但是提供所有可能的解决方案总是不错的，只需选择你喜欢的那种即可。 - DaniP
14
使用inline-block解决方案会强制在每个元素后面插入<br>。
使用float解决方案会强制将所有元素包装在“clearfix”div中。
另一种优雅的解决方案是对元素使用display: table。
使用这种解决方案，您不需要手动插入换行符（就像使用inline-block时那样），也不需要在您的元素周围添加包装器（就像浮动一样），并且如果需要，您可以居中元素。
http://jsfiddle.net/8md3jy4r/3/
11

将 p 的样式添加 display: inline-block; 就可以解决这个问题：

http://jsfiddle.net/pyq3C/

#container p{
    background-color: green;
    display: inline-block;
}
现在它部分工作。段落的宽度与我想要的内容相等。问题是现在我只得到一行中的所有段落，而不是三个。 - user3067088
你可以通过添加代码float: left; clear: left;来强制换行。 - Stuart Kershaw
在显示为inline-block的元素上添加float: left将根据CSS 2.1 REC（关于显示、位置和浮动之间的关系）将其设置为block，因此您也可以删除inline-block而不会改变任何内容。 - FelipeAls
10
7

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

5
您可以使用flex来实现这个效果：
.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

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

5
5
2
尝试使用元素代替。或者，如果您喜欢，尝试使用display:inline。
现在它部分工作。段落的宽度与我想要的内容相等。问题是现在我得到了所有段落只有一行而不是三行。 - user3067088
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接