Question

我想在内联块元素上有一个背景颜色，它不会超过最宽的文本点。只要通过添加 标记明确文本中的换行符，它就可以正常工作。如果没有 标签，并且它自己换行，则会达到100％的宽度。

此处是“ipsum”之后的 标记。

这就是它自己包装的时候：

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

以下是HTML代码：

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

和CSS：

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

Answer 1

将box-sizing: border-box和left以及right填充添加到包装器元素。这应该有用。

Checkout 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

使用类似

的内容

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

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

p {

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

Answer 5

请检查是否可行。

在export class DraftService { public errorMessage: string; public isWarningProblem: boolean; constructor ( private generalErrorService: GeneralErrorService, private http: HttpClient ) { [...] } public launchPingEditReadDraftByActionOfferIdUrl(action: string, offerIdUrl: string): Subscription { return interval(10).subscribe( () => { //Get variables from the server and set them. }, () => {} ); } }标记内尝试内联属性将为段落逐行产生损坏的背景效果
因为您已经提到宽度不能保持固定，所以已经处理了容器边缘的边距

希望这对您有用！

<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;
}

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>

换行时，内联块元素的宽度扩展到100％

6 个答案: