內嵌塊行換行空間

Question

我有一個內聯塊元素，其中包含一個很長的單詞。當我調整視口的大小直到達到下一行的文本的斷點時，我獲得了大量的空間。但是，我希望inline-block元素立即換行到其內容的寬度。

我發現很難解釋到底發生了什麼，所以下面的GIF動畫來說明我的問題：

在調整視：

要明確的是，上面的圖片是我不斷調整視口的大小。

有沒有人知道一種方法來實現我想要的？即使使用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的尺寸，並且這不會像您提到的那樣具有很大的可擴展性。

@yugi建議的word-break: break-all也有效，但會導致單詞拼寫錯誤，無論其長度如何。

實現確切行爲的唯一方法是（據我所知）使用JavaScript。例如，你有你的文本換到div內span元素，然後添加這樣的事情：

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

，如果im理解你正確，你可以使用@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 3

我不認爲這是可能僅與CSS的一個元素。你的行爲的原因是元素的寬度仍然是其容器的100％。我能想到的唯一方法就是做一些有創意的事情......嘗試設置內聯風格，以便獲得收縮包裝行爲，但爲了解決背景顏色問題，也將其放入一個共享相同背景的容器。這應該工作。

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

基本上我做的是：

1. 將文本放在內部包裹元素中
2. 創建一個額外的絕對定位的背景元素
3. get the wi內聯內包裝件的DTH
4. 應用所述寬度與背景要素（加填充和諸如此類的東西）

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