如何使用其中的文本大小调整div宽度[重复]答案

【问题标题】：How to adjust div width with the siz of text inside it [duplicate]如何使用其中的文本大小调整div宽度[重复]
【发布时间】：2020-09-02 12:42:40
【问题描述】：

我的想法是使divs 中具有.main_content 类的每个元素的宽度等于其中文本的宽度。我该怎么做？

如您所见，每个（span、h2,p 和h6）的宽度与.main_contentdiv 相同。红色边框说明了这一点。

那么，如何使每个 div 的宽度适合这些 div 中的文本？（只有 CSS）

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

P：我一直在尝试手动设置每个元素的 width 的大小。但是代码太多了。有什么聪明的办法吗？

【问题讨论】：

display:table 和 support 很宽
来自副本：stackoverflow.com/a/37353025/8620333 .. display:table 是这里的路

标签： javascript html css

【解决方案1】：

你可以试试下面的css，看看是否有效。

.main_content {
  width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content>* {
  border: 1px solid red;
  display: table;
  margin: 0 auto;
  margin-bottom: 30px;
  text-align: center;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
      <span class="growth">Growth</span>
      <h2>5 compelling user referral campaign examples</h2>
      <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
      </p>
      <h6>Author</h6>
    </div>
  </div>
</div>

【讨论】：

CSS 可以在 IE 中使用，甚至包括 IE8 ....

【解决方案2】：

只有 1 个 CSS 函数：width: fit-content 注意这里：它在 IE 中不起作用。试试看：

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;

}

.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
  width: -moz-fit-content;
  width: fit-content;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

【讨论】：

我爱它，爱它！非常感谢！感谢您的宝贵时间！
@Laura 没问题，接受的答案会很棒
在没有前缀的某些浏览器（尤其是 Firefox）中无法使用：caniuse.com/#search=fit-content
@Laura 它在 2017 年与 grid 一起出现在某个地方，但我不确定，如果我错了，有人纠正我
@LáďaDurchánek 我添加了前缀

【解决方案3】：

在.main_content上使用弹性框：

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main_content > * {
  border: 1px solid red;
  margin-bottom: 30px;
  text-align: center; 
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

【讨论】：

【解决方案4】：

你可以简单地使用：

width: max-content;

对于所有子元素，这将为每个子元素（span、h2、p 和 h6）设置其中文本的宽度。

.main_content {
  width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content>* {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center; 
  width: max-content;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
      <span class="growth">Growth</span>
      <h2>5 compelling user referral campaign examples</h2>
      <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
      </p>
      <h6>Author</h6>
    </div>
  </div>
</div>

【讨论】：

max-width:100%; 以某种方式与fit-content 相似。

【解决方案5】：

将width: max-content 添加到您的.main_content > * {。

.main_content {
   width: 100%;
  height: 400px;
  font-weight: 800;
}

.main_content > * {
  border: 1px solid red;
  display: block;
  margin-bottom: 30px;
  text-align: center;
  width: max-content;
}

<div class="first_article">
  <div class="first_content">
    <div class="main_content">
       <span class="growth">Growth</span>
       <h2>5 compelling user referral campaign examples</h2>
       <p>Jumpstarts your user referral engine with these 5 approaches toreferral campaigns from popular apps.
       </p>
       <h6>Author</h6>
    </div>
  </div>
</div>

【讨论】：

max-width:100%; 以某种方式与fit-content 相似。