CSS: Phần trăm khoảng cách chữ cái để hoàn toàn khớp với hộp chứa div

Question

tôi cần phải vừa với văn bản hoàn toàn trong vùng chứa div có chiều rộng 100%.

Tôi đã cố gắng sử dụng letter-spacing nhưng có vẻ như chỉ chấp nhận px/em chứ không phải giá trị phần trăm .. nhưng điều đó sẽ không phản hồi (ví dụ: thay đổi kích thước cửa sổ).

Đây là những gì tôi đã nhận: http://jsfiddle.net/3N6Ld/

tôi nên có cách tiếp cận khác? Bất kỳ ý tưởng? Cảm ơn bạn

Answer 1

Nếu bạn biết bạn có thể nhận được bao nhiêu chữ cái bằng cách sử dụng đơn vị vw (chế độ xem chiều rộng).

Trong ví dụ bên dưới, tôi đã sử dụng giá trị 14.29vw, vì 100 (100% chiều rộng của cửa sổ) chia cho 7 (số chữ cái trong từ "CONTENT") là khoảng 14,29.

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.container{ 
 
    background: tomato; 
 
    height: 10%; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    color: white; 
 
    letter-spacing: 14.29vw; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    CONTENT 
 
    </div> 
 
</div>

Nếu bạn muốn làm cho chữ "T" gần gũi hơn với cạnh phải bạn có thể tăng letter-spacing một chút. Đối với đoạn mã Stack Overflow của, thiết lập nó để 14.67vw hiện các trick:

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.container{ 
 
    background: tomato; 
 
    height: 10%; 
 
    width: 100%; 
 
} 
 

 
.content { 
 
    color: white; 
 
    letter-spacing: 14.67vw; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="content"> 
 
    CONTENT 
 
    </div> 
 
</div>

Answer 2

Tôi đã viết một đoạn mã jQuery cho phép tính thư khoảng cách để áp dụng sao cho văn bản sử dụng toàn bộ chiều rộng của nó chứa : Stretch text to fit width of div.

Bạn có thể áp dụng nó vào các văn bản và bắn nó vào cửa sổ thay đổi kích thước để letter-spacing được tính toán lại khi trình duyệt được thay đổi kích cỡ:

DEMO

HTML:

<div class="container"> 
    <div class="stretch">CONTENT</div> 
</div> 

jQuery:

$.fn.strech_text = function(){ 
    var elmt   = $(this), 
     cont_width = elmt.width(), 
     txt   = elmt.text(), 
     one_line  = $('<span class="stretch_it">' + txt + '</span>'), 
     nb_char  = elmt.text().length, 
     spacing  = cont_width/nb_char, 
     txt_width; 

    elmt.html(one_line); 
    txt_width = one_line.width(); 

    if (txt_width < cont_width){ 
     var char_width  = txt_width/nb_char, 
      ltr_spacing = spacing - char_width + (spacing - char_width)/nb_char ; 

     one_line.css({'letter-spacing': ltr_spacing}); 
    } else { 
     one_line.contents().unwrap(); 
     elmt.addClass('justify'); 
    } 
}; 

$(document).ready(function() { 
    $('.stretch').strech_text(); 
    $(window).resize(function() { 
     $('.stretch').strech_text(); 
    }); 
}); 

CSS:

html, body{ 
    height: 100%; 
    margin:0; 
} 
.container{ 
    height: 10%; 
    background: red; 
} 

.stretch{ 
    overflow-x:hidden; 
} 
.stretch_it{ 
    white-space: nowrap; 
} 

Answer 3

Một giải pháp nếu bạn không phải là ngữ nghĩa, ý tôi là nếu bạn chỉ cần kết quả thị giác, là sử dụng flexbox.

Vì vậy, bạn có bạn <div id="#myText">TEXT 1</div>

Chúng ta cần phải có được điều này:

<div id="#myText"> 
    <span>T</span> 
    <span>E</span> 
    <span>X</span> 
    <span>T</span> 
    <span>&nbsp;</span> 
    <span>1</span> 
</div> 

Vì vậy, sau đó bạn có thể áp dụng CSS:

#myText { 
    display: flex; 
    flex-direction: row; 
    justify-content: space-between; 
} 

Để chuyển đổi các văn bản để span bạn có thể sử dụng jQuery hoặc bất kỳ thứ gì.Ở đây với jQuery:

var words = $('#myText').text().split(""); 
$('#myText').empty(); 
$.each(words, function(i, v) { 
    if(v===' '){ 
     $('#myText').append('<span>&nbsp;</span>'); 
    } else { 
     $('#myText').append($("<span>").text(v)); 
    } 
}); 

Để có kết quả tốt hơn, hãy bỏ khoảng cách giữa các ký tự: 0 thành #myText để bất kỳ khoảng cách thừa nào sẽ được áp dụng.