内联块换行额外空间

Question

我有一个包含很长字的内联块元素.当我调整视口大小直到我到达下一行的文本的断点时,我得到了大量的空间.但是,我希望inline-block元素立即包装到其内容的宽度.

我发现很难准确解释发生了什么,所以在GIF动画下面说明我的问题:

调整视口大小时:

要清楚,上面的图像是我不断调整视口大小.

有没有人知道如何实现我想要的？即使使用CSS连字,白色空间仍然存在(我不想要).

JSFiddle.调整框架大小以查看我的意思.

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

Answer 1

该inline-block确实扩展上调整为你的动画节目,使之保持地方的长字进入这个空间一次.

一个简单的解决方案是添加text-align: justify,但我担心它可能不完全是你想要的(见演示).

media queries正如@Parody建议的那样,另一个是使用,但你必须知道包含的尺寸div,并且如你所提到的那样,它不会具有很大的可扩展性.

word-break: break-all@yugi 的建议也有效,但无论长度如何,都会导致单词逐字逐句崩溃.

实现精确行为的唯一方法是(据我所知)使用javascript.例如,您必须将文本包装到其中的span元素中div,然后添加如下内容:

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();

请参阅jsfiddle工作演示.(←多次编辑)

这是相当多的代码,但它的工作原理; )

(PS:我认为jquery是可用的,如果没有,在纯JS中可以实现完全相同)