Inline-block line-wrap extra space

Question

I've got an inline-block element that contains a very long word. When I resize the viewport until I reach the breakpoint of the text wrapping to the next line, I get a substantial amount of space. However, I would like the inline-block element to wrap immediately to the width of its contents.

I found it hard to explain exactly what's going on, so below an animated gif to illustrate my issue:

Upon resizing the viewport:

To be clear, the image above is me continuously resizing the viewport.

Does anybody know a way to achieve what I'd like? Even with CSS hyphenation the white-space still remains (which I don't want).

JSFiddle. Resize the frames to see what I mean.

div {
    display: inline-block;
    background-color: black;
    color: white;
    padding: 5px;
}

Answer 1

The inline-block indeed extends on resizing as your animation shows, so that it keeps place for the long word to go into that space again.

One simple solution would be to add text-align: justify, but I'm afraid it may not exactly be what you want (see demo).

Another one would be the use of media queries, as @Parody suggested, but you would have to know the dimentions of the containing div, and that would not be very scalable as you mentionned.

The word-break: break-all suggested by @yugi also works but causes the words to to collapse letter by letter, regardless of their length.

The only way to achieve the exact behavior is (as far as I know) to use javascript. For example, you would have to wrap your text into a span element inside the div, and then add something like this :

var paddingLeft = parseInt($('#foo').css('padding-left')),
    paddingRight = parseInt($('#foo').css('padding-left')),
    paddingTop = parseInt($('#foo').css('padding-top')),
    paddingBottom = parseInt($('#foo').css('padding-Bottom')),
    cloned = $('#foo span').clone(),
    cloned_wrap = document.createElement('div');

$(cloned_wrap).css({
    paddingLeft : paddingLeft,
    paddingRight : paddingRight,
    display : 'inline-block',
    visibility: 'hidden',
    float: 'left',
});

$(cloned_wrap).insertAfter('#foo');
cloned.appendTo(cloned_wrap);

$(window).on('resize', function(){
    $('#foo').css('width', cloned.width() + 1);
    $(cloned_wrap).css('margin-top',- $('#foo').height() - paddingTop - paddingBottom);
}).resize();

Please see the jsfiddle working demo. (← edited many times)

That's quite a lot of code, but it works ; )

(PS : I assumed jquery was available, if not, quite the same is achievable in pure JS)

Answer 2

I don't think this is possible only with CSS for the one element. The reason for your behavior is that the width of the element is still 100% of its container. The only way I could think to accomplish this is by doing something a little bit "creative"...try setting the style to inline so you get the shrink-wrap behavior, but to get around the background color issue, also put it in a container that shares the same background. That should work.