Không gian thêm dòng nội dòng khối

Question

Tôi có một phần tử chặn nội tuyến có chứa một từ rất dài. Khi tôi thay đổi kích thước khung nhìn cho đến khi tôi đạt đến điểm ngắt của văn bản được bao bọc cho dòng tiếp theo, tôi nhận được một lượng không gian đáng kể. Tuy nhiên, tôi muốn phần tử khối nội tuyến bọc ngay lập tức với chiều rộng của nội dung của nó.

tôi thấy nó khó để giải thích chính xác những gì đang xảy ra, vì vậy dưới một gif động để minh họa cho vấn đề của tôi:

Khi thay đổi kích thước khung nhìn:

Để được rõ ràng, các hình ảnh ở trên là tôi liên tục thay đổi kích thước khung nhìn.

Có ai biết cách nào để đạt được điều tôi muốn không? Ngay cả với dấu gạch nối CSS, khoảng trắng vẫn còn (mà tôi không muốn).

JSFiddle. Thay đổi kích thước khung hình để xem ý tôi là gì.

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

Answer 1

Các inline-block thực sự kéo dài về thay đổi kích thước như hình ảnh động của bạn cho thấy, để nó giữ vị trí cho từ dài để đi vào không gian đó một lần nữa.

Một giải pháp đơn giản là thêm text-align: justify, nhưng tôi e rằng nó có thể không chính xác như những gì bạn muốn (xem demo).

Một số khác sẽ là sử dụng media queries, như @Parody đã đề xuất, nhưng bạn sẽ phải biết các kích thước có chứa div và điều đó sẽ không thể mở rộng như bạn đã đề cập.

word-break: break-all được đề xuất bởi @yugi cũng hoạt động nhưng làm cho các từ bị thu gọn bằng chữ cái, bất kể độ dài của chúng.

Cách duy nhất để đạt được hành vi chính xác là (theo như tôi biết) để sử dụng javascript. Ví dụ, bạn sẽ phải quấn văn bản của bạn thành một yếu tố span bên trong div, và sau đó thêm một cái gì đó như thế này:

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

Hãy xem jsfiddle working demo. (← chỉnh sửa nhiều lần)

Đó là khá nhiều mã, nhưng nó hoạt động;)

(PS: Tôi giả định jquery đã có sẵn, nếu không, hoàn toàn giống có thể đạt được trong tinh khiết JS)

Answer 2

Nếu im hiểu bạn một cách chính xác bạn có thể sử dụng các loại @media để quyết định những gì css để sử dụng tùy thuộc vào độ rộng của màn hình

đây là một ví dụ về những gì tôi có nghĩa là

@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

Tôi không nghĩ rằng đây có thể chỉ với CSS cho một phần tử. Lý do cho hành vi của bạn là chiều rộng của phần tử vẫn là 100% của vùng chứa của nó. Cách duy nhất tôi có thể nghĩ để thực hiện điều này là bằng cách làm một chút gì đó "sáng tạo" ... thử đặt kiểu thành nội tuyến để bạn có được hành vi thu nhỏ, nhưng để tránh vấn đề màu nền, hãy đặt nó vào một vùng chứa có chung nền.Cần làm việc.

Answer 4

Tôi vẫn đánh giá cao câu trả lời của @ lapin (tôi đã chấp nhận và trao tiền thưởng), tôi phát hiện ra sau khi thực tế là nó không hoàn toàn hoạt động trên nhiều phần tử bên cạnh nhau (không liên quan gì đến @ lapin, tôi đã không đề cập đến nó trong câu hỏi ban đầu của tôi như tôi nghĩ rằng nó sẽ là thông tin không liên quan).

Dù sao, tôi đã đi lên với những điều sau đây mà làm việc cho tôi (giả định các yếu tố cần được áp dụng cho những .title và .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(); 
}); 

Về cơ bản những gì tôi làm là:

1. đặt văn bản trong phần tử quấn bên trong
2. tạo thành phần nền bổ sung hoàn toàn được định vị
3. tải xuống dth của phần tử bọc inline bên
4. áp dụng cho biết chiều rộng đến các yếu tố nền (cộng với đệm và không có điều gì)

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