Question

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

我发现很难准确解释发生了什么，所以在GIF动画下方来说明我的问题：

调整视口大小后：

animated gif for illustration purposes

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

有没有人知道实现我喜欢的方法？即使使用CSS连字，白色空间仍然存在（我不想要）。

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

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

Answer 1

inline-block确实会在动画显示时调整大小，以便长字再次进入该空间。

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

另一个是使用media queries，正如@Parody建议的那样，但是您必须知道包含div的维度，并且如您所提到的那样，它不会具有很大的可扩展性。 / p>

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

实现确切行为的唯一方法是（据我所知）使用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 working demo。（←多次编辑）

这是相当多的代码，但它有效; ）

（PS：我认为jquery是可用的，如果没有，在纯JS中可以实现完全相同）

Answer 2

我不认为这只能用于一个元素的CSS。您的行为的原因是元素的宽度仍然是其容器的100％。我能想到实现这一目标的唯一方法是做一些有点“创造性”的事情......尝试将样式设置为内联，以便获得收缩包装行为，但要解决背景颜色问题，同时将其放入一个共享相同背景的容器。这应该有用。

Answer 3

如果我正确理解你，你可以使用@media类型来决定使用什么css，具体取决于屏幕的宽度

这是我的意思的一个例子

@media(min-width:0px) and (max-width:200px){
    div {
    display: block;
    background-color: black;
    color: white;
    padding: 5px;
    }
}
@media (min-width:200px){
    div {
    display: inline-block;
    background-color: black;
    color: white;
    padding: 5px;
    }
}

Answer 4

我仍然非常感谢@ lapin的答案（我接受并授予了赏金），我发现它之后并没有完全相同的多个元素（与@lapin无关，我在原始问题中没有提到它，因为我认为这是无关的信息。）

无论如何，我已经提出了适合我的以下内容（假设应该应用的元素是.title和.subtitle）：

$('.title, .subtitle').each(function(i, el) {
    var el = $(el),
        inner = $(document.createElement('span')),
        bar = $(document.createElement('span'));

    inner.addClass('inner');
    bar.addClass('bar');

    el.wrapInner(inner)
        .append(bar)
        .css({
            backgroundColor: 'transparent'
        });
});

function shrinkWrap() {
    $('.title, .subtitle').each(function(i, el) {
        var el = $(el),
            inner = $('.inner', el),
            bar = $('.bar', el),
            innerWidth = inner.width();

        bar.css({
            bottom: 0,
            width: innerWidth + parseFloat(el.css('paddingLeft')) + parseFloat(el.css('paddingRight'))
        });
    });
}
shrinkWrap();

$(window).on('resize', function() {
    shrinkWrap();
});

基本上我所做的是：

将文本放入内部换行元素
创建一个额外的绝对定位的背景元素
获取内联内部包装元素的宽度
将所述宽度应用于背景元素（加上填充等等）

CSS：

.title, .subtitle {
    position: relative;
    z-index: 500;
    display: table;
    padding-left: 10px;
    margin-right: 10px;
    background-color: red;
}

.title .bar, .subtitle .bar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: -10;
    background-color: red;
}

内联块换行额外空间

4 个答案: