Inline-block element extends to 100% width when wrapping lines

Question

I want to have a background color on an inline-block element that doesn't go past the widest point of text. It works fine as long as the line break in the text is explicit by adding a <br> tag. If there's no <br> tag and it wraps on its own, it goes to 100% width.

Here it is with the <br> tag after "ipsum".

And here it is when it wraps on its own:

https://jsfiddle.net/340v3hnj/

How can I have the background be the size of the text box without having to manually add <br> tags?

.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

Please check if this works.

• trying inline attributes inside <p> tag will produce broken background effect line-by-line for the paragraph
• Since you have mentioned that width cannot be kept fixed, so margins from the container edges have been handled

Hope this works for you!

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