行内块元素在换行时扩展到 100% 宽度答案

【问题标题】：Inline-block element extends to 100% width when wrapping lines行内块元素在换行时扩展到 100% 宽度
【发布时间】：2020-12-23 18:04:18
【问题描述】：

我想在不超过文本最宽点的 inline-block 元素上设置背景颜色。只要通过添加  标记来明确文本中的换行符，它就可以正常工作。如果没有  标记并且它自行换行，它会变为 100% 宽度。

这里是“ipsum”后面的 标签。

这是它自己包装的时候：

https://jsfiddle.net/340v3hnj/

如何在不手动添加 标签的情况下将背景设置为文本框的大小？

.wrapper {
  border: 1px solid red;
  text-align: center;
  width: 450px;
}

p {
  display: inline-block;
  margin: 0;
  padding: 10px;
  font: 50px arial;
  color: white;
  background: black;
  width: auto;
}

<div class="wrapper">
  <p>Lorem ipsum dolorsit amet</p>
</div>

【问题讨论】：

我已经更新了我的答案以获得更准确的宽度，您可以修改数字
这个问题经常被问到，但没有有效的答案。以下所有答案都使用固定宽度或边距设置，但对文本不是动态的...
发生这种情况是因为您的文本大小。背景位于渲染文本的后面。您可以通过缩小文本来测试这一点。

标签： html css

【解决方案1】：

请检查这是否有效。

尝试标签内的内联属性会为段落逐行产生破碎的背景效果
由于您提到宽度不能保持固定，因此已处理容器边缘的边距

希望这对你有用！

.wrapper {
  border: 1px solid red;
  text-align: center;
  width: 450px;
}
p {
  display: inline-block;
  padding: 10px;
  font: 50px arial;
  color: white;
  background: black;
  /* try adding the following line to your code */
  margin: 0 60px;
}

<div class="wrapper">
  <p>Lorem ipsum dolorsit amet</p>
</div>

【讨论】：

【解决方案2】：

将box-sizing: border-box 和left 和right 填充添加到包装器元素。应该可以的。

结帐 jsfiddle： https://jsfiddle.net/340v3hnj/15/

【讨论】：

【解决方案3】：

在你的段落中使用这种风格

p {
  display: inline-block;
  margin: 0;
  padding: 10px;
  font: 50px arial;
  color: white;
  background: black;
  width : 100%;
}

我认为问题在于你的段落宽度。

【讨论】：

这个解决方案比其他固定像素宽度的解决方案要好
我认为这个问题没有被完全理解。我不希望段落 100%，我希望它是文本的宽度。

【解决方案4】：

将 样式更新为以下并重试代码

p {

  position: relative;
  width:310px;
  display: inline-block;
  margin: 0;
  padding: 10px;
  font: 50px arial;
  color: white;
  background: black;
}

【讨论】：

对不起，我之前没有指定，但是使用固定像素宽度是行不通的。文字来自CMS，所以我不知道文字的大小。
将显示更改为display:inline而不是inline-block可以将宽度更改为您想要的，但它有其他副作用

【解决方案5】：

使用类似的东西

        .wrapper {
          border: 1px solid red;
          text-align: center;
          width: 450px ;
          font:50px Arial;
        }
        .box{background:#000;padding:0px;           
         display:inline-block;
         width:300px; 
         font: 50px arial;  
         background-size:cover; 
         margin:0 auto;  
         height:100%;
         color: white;
          }

    
    
    
        <div class="wrapper">
        <div class="box">
    
    
          <p>Lorem ipsum dolorsit amet</p>
        </div></div>

【讨论】：

对不起，我之前没有指定，但是使用固定像素宽度是行不通的。文字来自CMS，所以我不知道文字的大小。

【解决方案6】：

如果您想在不强制换行的情况下重现此内容，则应使用边距或 max-width 以使其正常工作。

.wrapper {
  border: 1px solid red;
  text-align: center;
  width: 450px;
}
p {
  display: inline-block;
  margin: 0;
  padding: 10px;
  font: 50px arial;
  color: white;
  background: black;
}
.with-margin{
  margin: 0 66px;
}
.with-max-width{
  max-width: 300px;
}

Margin:
<div class="wrapper">
  <p class="with-margin">Lorem ipsum dolorsit amet</p>
</div>
<br><br>
Max-width:
<div class="wrapper">
  <p class="with-max-width">Lorem ipsum dolorsit amet</p>
</div>

【讨论】：