inline-block换行额外空间 [英] Inline-block line-wrap extra space

问题描述

我有一个inline-block元素，其中包含一个非常长的词。当我调整视口的大小，直到我到达包装到下一行的文本的断点，我获得了大量的空间。然而，我想inline-block元素立即包装其内容的宽度。

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.

我发现很难解释到底是怎么回事，所以下面一个动画gif说明我的问题：

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.

有人知道一种方式来实现我想要的吗？即使使用CSS连字符，白色空间仍然存在（我不想要）。

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 。调整框架大小以查看我的意思。

JSFiddle. Resize the frames to see what I mean.

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

推荐答案

inline-block 确实在动画显示时调整大小，因此它会保留长字进入该空格。

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.

一个简单的解决方案是添加 text-align：justify ，但恐怕它可能不完全是你想要的（见 demo ）。

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

另一个将是使用媒体查询，如@Parody建议，但你必须知道包含 div 的尺寸，并且不会像您提到的那样非常可扩展。

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.

word-break：@yugi建议的break-all 也能正常工作，但会导致单词以字母为单位折叠，而不管其长度。

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

实现确切行为的唯一方法是（据我所知）使用javascript。例如，您必须将文本换行到 div 中的 span 元素中，然后添加如下：

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

请参阅 jsfiddle工作演示。 （←编辑多次）

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

这是相当多的代码，但它的工作原理; ）

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

（PS：我假设jquery可用，如果没有，在纯JS中也是可以实现的）

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

这篇关于inline-block换行额外空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！