Inline-block div not shrinking to content

Issue

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”?

Solution

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>

Answered By – Marc Audet

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published