內聯塊元素在換行時擴展到 100% 寬度

Question

我想在不超過文本最寬點的行內塊元素上設置背景顏色。 只要文本中的換行符通過添加<br>標簽是明確的，它就可以正常工作。 如果沒有<br>標簽並且它自己換行，它會變成 100% 的寬度。

這是“ipsum”之后的<br>標簽。

這是它自己包裝的時候：

https://jsfiddle.net/340v3hnj/

如何讓背景成為文本框的大小而不必手動添加<br>標簽？

 .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>

Answer 1

添加box-sizing: border-box和left和right填充到包裝元素。 那應該工作。

結帳jsfiddle： https ://jsfiddle.net/340v3hnj/15/

Answer 2

將此樣式用於您的段落

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

問題是我認為你的段落的寬度。

Answer 3

使用類似的東西

 .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>

Answer 4

將<p></p>樣式更新為以下內容並重試代碼

p {

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

Answer 5

請檢查這是否有效。

• 在<p>標簽內嘗試內聯屬性會為段落逐行產生破碎的背景效果
• 由於您提到寬度不能保持固定，因此已處理容器邊緣的邊距

希望這對你有用！

 .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>

Answer 6

如果您想在不強制轉到新行的情況下重現此內容，您應該使用 margin或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>