换行时,内联块元素的宽度扩展到100%

Question

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

这里是<br>"ipsum"之后的标签.

在这里它是自己包装的:

https://jsfiddle.net/340v3hnj/

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

这是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和rightpadding 添加到包装元素。那应该有效。

检查jsfiddle： https://jsfiddle.net/340v3hnj/15/