Дополнительный пробел в линейном блоке

У меня есть элемент встроенного блока, который содержит очень длинное слово. Когда я изменяю размер окна просмотра, пока не дойду до точки прерывания переноса текста до следующей строки, я получаю значительное количество места. Тем не менее, я хотел бы, чтобы элемент inline-block мгновенно привязывался к ширине его содержимого.

Мне было сложно объяснить, что происходит, поэтому под анимированным gif проиллюстрировать мою проблему:

При изменении размера окна просмотра:

Чтобы быть ясным, изображение выше - это постоянное изменение размера окна просмотра.

Кто-нибудь знает, как добиться того, что мне нужно? Даже с переносом CSS пустое пространство остается (что мне не нужно).

JSFiddle. Измените размер кадров, чтобы увидеть, что я имею в виду.

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

Ответ 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)

Ответ 2

Я не думаю, что это возможно только с CSS для одного элемента. Причиной вашего поведения является то, что ширина элемента по-прежнему составляет 100% от его контейнера. Единственный способ, с помощью которого я мог бы это сделать, - сделать что-то немного "творческим"... попробуйте установить стиль в строку, чтобы вы получили поведение усадки, но чтобы обойти проблему цвета фона, также поместите его в контейнер, который имеет один и тот же фон. Это должно работать.

Ответ 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;
    }
}

Ответ 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();
});

В основном, что я делаю:

поместить текст во внутренний элемент wrap
создать дополнительный абсолютно расположенный элемент фона
получить ширину встроенного внутреннего элемента wrap
примените указанную ширину к фоновому элементу (плюс дополнение и многое другое)

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;
}