CSS text wrapping collapse container

Question

I'm looking for a HTML/CSS solution to a problem we've encountered on a site we're building. I am happy to implement a JavaScript based solution if I need to, but I'd prefer it was handled natively.

We have content managed text which needs to sit inside a designated area but wrap if it exceeds the available width. Behind the text is a background colour with opacity.

When the text is short, due to the float, the container collapses to the width of the text. When the text is long, and a wrap occurs, the container hangs out at the maximum width, even though the text inside has wrapped underneath, so there's a small section of background colour on the right side (which isn't big enough for the wrapped word) I want the container to collapse to the edge of the previous word so it doesn't "look like" there is space for the wrapped word, when it is very close.

HTML

<div>
    <p>Crack the Shutters Open Wide for Parkside Paradise</p>
</div>

CSS

body div {
    background-color: #AAFF3B;
    max-width:80%;
    padding:20px;
    display:inline-block;
    float:left;
}
body p {
    display:inline-block;
    background-color: #FFAA3B;
    position: relative;   
    float:left;
    white-space:pre-line;
    clear:left;
}

Here is a JSFiddle: http://jsfiddle.net/nmuot8bm/3/

If you look at the 3rd example, you can see a small amount of padding on the right hand side of the orange box, where the word porttitor has wrapped underneath to a new line but the orange container still sits at the maximum width, despite the float. If line breaks are introduced by the content editors (e.g. between vestibulum and porttitor as per example 4) then the container collapses correctly.

What I think is happening is the container grows before the text wraps and the browser doesn't recompute the width after wrapping?

Here's a picture of my test case shown in the JSFiddle:

Here is a picture of the fault on the staging site (before separated out to a JSFiddle):

You can see that the text has wrapped, but the container has not collapsed, leaving a big gap of background colour.

n.b. We can emulate this by doing text-align:justify but then the spacing between the words is not consistent with the rest of the text on the site.

edit: I see that this question may be a duplicate. I swear I did research before I posted!

max-width adjusts to fit text?

CSS Width / Max-Width on Line Wrap?

Wrapping text forces containing element to max-width

Shrink DIV to text that's wrapped to its max-width?

I think that the general consensus/conclusion is that it is not possible without bleeding edge CSS and I should use a JavaScript solution.

I have added a few more examples to my JSFiddle: http://jsfiddle.net/nmuot8bm/6/ including the JavaScript solution from here: https://stackoverflow.com/a/33246364/647728

Answer 1

Not possible with CSS...that's the way the inline box model works JS example/solution can be found on the JSFiddle