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

As you mentioned, not possible with CSS...that's the way the inline box model works. — Paulie_D, Nov 03 '15 at 10:32
This is probably the same as this question: *[CSS float to collapse a div with wrapped text to the minimum needed](https://stackoverflow.com/questions/18965694/css-float-to-collapse-a-div-with-wrapped-text-to-the-minimum-needed?rq=1)* — Simon East, Jan 16 '18 at 02:05

score 0 · Accepted Answer · answered Nov 18 '15 at 22:06

0

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

answered Nov 18 '15 at 22:06

agrath

901
1
11
25

score -1 · Answer 2 · answered Nov 18 '15 at 02:36

-1

If the problem is floated elements collapsing the parent container, there are many solutions; the easiest among them being adding overflow: hidden or display: table to the parent (the thing collapsing). Also be aware that inline-block and floated elements are essentially redundant.

answered Nov 18 '15 at 02:36

Gina

570
2
5
20

I was after the inverse - I want to force the container to collapse when the wrapping has forced it to be larger horizontally but then the text wraps leaving a gap on the edge – agrath Nov 18 '15 at 03:00
Okay, than you need to put a max-width on the container :) if by collapsing you mean something like "a div starts out at 950px height, I want it to become 650px height when the container is stretched by a big screen" then you would write a media query. the media query would look like whatever the max-width on that element might have been: @media screen and (max-width: 1020px) or whatever desired. – Gina Nov 18 '15 at 16:40
And coincidentally, if your paragraph text is falling outside the box, make sure of a few things: 1. If it's floated the parent has overflow: hidden or display: table 2. it and the parent have box-sizing: border-box 3. is it positioned absolute or relative inside a parent without positioning? Add positioning to the parent (usually position relative) because it's probably static by default. – Gina Nov 18 '15 at 16:44
Hm, I just looked at your problem case and realized I never answered your actual question... I've actually experienced this bug on Chrome browsers and not Firefox or Safari. What you're talking about is the browser rendering the spacing in the text differently. I usually use word-wrap: break-word or word-break: break-word to make sure it wraps the same every time and WON'T break on newlines. – Gina Nov 18 '15 at 16:50
Thanks for your assistance, the issue is actually quite subtle but when the text wraps because the box hits it's max-width, the space that the wrapped on word occupied is not collapsed. – agrath Nov 18 '15 at 22:07

CSS text wrapping collapse container

2 Answers2