Inline-block div not shrinking to content

Question

I am using jQuery to insert some divs containing text into my layout. I have styled the divs with display: inline-block and I want the divs to "shrink-wrap" their content. This seems to be working in most cases but I've come across one case where the text wraps to the next line but the div leaves a bunch of extra padding on the right side. I'm using Chrome Version 53.0.2785.143 m.

Here is a stripped down version of my css and markup. The first box shows what I am describing, the second shows how I expect it to look (which I achieved by explicitly declaring a width). Or you can view it here at jsfiddle: https://jsfiddle.net/3rakaLxc/

[data-station-display] {
  border: 1px solid #000000;
  width: 490px;
  height: 367px;
  background-color: #e0e0ee;
}

.stationOverlay {
  position: absolute;
  left: 0;
  top: 0;
}

[data-station-display] .textbox-border {
  display: inline-block;
  margin: auto;
  border-radius: 4px;
  padding: 2px;
  background: #B7B7B7;
  background: linear-gradient(to bottom, #FFFFFF 0%, #808080 100%);
}

[data-station-display] .textbox {
  display: inline-block;
  max-width: 245px;
  padding: 1px;
  border-radius: 4px;
  font-family: verdana, tahoma, Arial;
  font-size: 9.5px;
  font-weight: bold;
  opacity: 0.6;
  cursor: default;
}

<div data-station-display style="position:relative;">
  <div class="stationOverlay textbox-border" data-stationid="6" style="top: 337px; left: 0px;">
    <div class="textbox yellow" >Station Format: Obstacle Course/Private Lesson</div>
  </div>
</div>
<p>
How I think it should look:
</p>
<div data-station-display style="position:relative;">
  <div class="stationOverlay textbox-border" data-stationid="6" style="top: 337px; left: 0px;">
    <div class="textbox yellow" style="width:218px;">Station Format: Obstacle Course/Private Lesson</div>
  </div>
</div>

How can I get rid of the extra space to the right of the word "private"?

Your code is very low quality. Use classes and avoid mixing html with css. — kind user, Oct 17 '16 at 23:22
@K.Daniek Not sure what you're talking about. He posted a runnable code snippet that clearly demonstrates his issue and his example satisfies all elements of the [MCVE](http://stackoverflow.com/help/mcve) guidelines. — Tyler Roper, Oct 17 '16 at 23:31
This explanation may help: [**Make container shrink-to-fit child elements as they wrap**](http://stackoverflow.com/a/37413580/3597276) — Michael Benjamin, Oct 17 '16 at 23:33
I did some research and [found an answer](http://stackoverflow.com/a/14597951/2026606), although I hate to say it ain't too pretty. — Tyler Roper, Oct 17 '16 at 23:33
@Santi Yeah, I know. But this code looks terribly. If I would like to ask for help and post my code into public, I would take care of it and do everything I can to make it clear. But in that case, I can't say that this code snippet is looking good and clear. Mixing html with css doesn't help at all. Aswell as using attributes instead of classes. — kind user, Oct 17 '16 at 23:36
I don't know what about this code isn't clear to you, but I can tell you that it reads perfectly clear to me. This sounds like an issue on your side, not OP's. — Tyler Roper, Oct 17 '16 at 23:38
@K.Daniek It is a stripped down version of code that is **in progress**. There is a lot of javascript involved with the real project that has helped shape it into its current state. The more I change to make it pretty for you, the less accurate it becomes, the less likely it is to be properly reproduced, and so the less likely an answer will be to solve it. If it's too difficult for you, move along. — xr280xr, Oct 17 '16 at 23:57
@Santi - thank you. It looks like your linked answer will be a good starting point to resolving the problem. — xr280xr, Oct 18 '16 at 16:56

score 1 · Accepted Answer · edited Nov 22 '22 at 22:09

This is an interesting problem.

Consider the following simplified example.

I have an inline-block element .textbox with a max-width of 300px, designed to force the text to wrap.

In the first line, I added a white-space: nowrap to keep the text on a single line and to force it to overflow out of the element.

If you run the snippet below, you should see that the right edge of the second box coincides with the word "onto", so the text flow algorithm in the browser will force the text, starting with "onto" to flow into the second line, as expected.

Now, as you noted, there is white space left over to the right of the preceding word ("wraaaa....ap"). This space corresponds to the length of the word "onto" up to the max-width of the containing element.

Browsers do not compute the amount of white space left by the string/word that is about to flow onto the second line, therefore, it leaves the width of the .textbox to the value defined by max-width.

So, this demonstrates how the extra space originates. However, there is no way using CSS of forcing the browser to "backspace" and eliminate the hanging white space to the right.

With a lot more effort, you might be able to come up with a JavaScript/jQuery fix, but that would be a different exercise, which perhaps some other member of the community may pursue to further the answer along.

I should also note the the same problem arises in Firefox.

Furthermore, the same effect manifests itself if you try display table-cell and table and inline-table.

.textbox {
  outline: 1px dotted gray;
  display: inline-block;
  max-width: 300px;
  margin: 2px 0; /* for demo only */
}
.textbox.fix {
  white-space: nowrap;
}

<div class="textbox fix">Some words that can wraaaaaaaaaaaaaaaap onto a second line as needed.</div>
<br>
<div class="textbox">Some words that can wraaaaaaaaaaaaaaaap onto a second line as needed.</div>

Thank you very much for your analysis. Would you please add the following link to the part where you mention a javascript/jQuery fix? I am using this as a starting point to resolve the problem: http://stackoverflow.com/questions/14596213/shrink-div-to-text-thats-wrapped-to-its-max-width/14597951#14597951 — xr280xr, Oct 18 '16 at 16:55

Inline-block div not shrinking to content

1 Answers1

Linked