How to make the background of an inline element with a line break extend to the farthest edge of each side?

Question

I cannot figure out how to do this even with containers. An inline container's background will shrink to the size of each line and an inline-block container will just act like a block element... Floating does not seem to work either.

Example:

<div style="width:250px;position:absolute;left:50%;top:50%;margin-left:-100px;border:2px solid #0000ff;">
<div style="display:inline-block;border:2px solid #ff0000;">
    <p style="display:inline;background: #00ff00;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>

http://codepen.io/anon/pen/zxKEBY

You can see the inline-block container (red border) still fills the width of the overall container (blue border).

Is there a way to make the inline-block container only as wide as the longest line of the inline element without explicitly setting a width?

Answer 1

I've been looking this over for quite some time trying to figure out what's going on because this is very intriguing to me. And this is what I have concluded:

The text is in fact running to the edge as you see, but by calling inline it's merely presenting the illusion that the container should be smaller because it forced the word consectetr to the next line. A few things I have noticed (I removed your inline CSS and added it to JsFiddle's CSS section for better view-ability):

ORIGINAL CODE: ORIGINAL FIDDLE

1. When setting the p to inline-block or inline and adding word-break: break-all you can see the word consectetr perfectly fits into the box, right above the edge:

FIDDLE 1 - inline-block

FIDDLE 2 - inline

2. If you use your original code and change the ps parent div to inline instead of inline-block you can see the red border wraps around the text, but it doesn't wrap the container, it wraps the string of text, even breaking where the sentence does:

FIDDLE 3 - parent inline

3. And finally if you were to add in a line-break, the results would be as you expected:

FIDDLE 4 - line break

So my final conclusion is although it appears the string is broken up into two different lines and smaller than it's parent width, it's just an illusion and it's actually still taking up the full width of it's parent unless a <br/> tag specifically tells it where to break the line up.