Filling a div using line spacing

Question

I'm having a problem filling a div with text using letter-spacing . The main problem is that I do not know the width of the div .

At first I thought using text-align= justify , but since then I worked in the dark and did not know how to solve this. I guess some scripting magic can do the trick.

The imgur link gives you an idea of ​​what I mean:

 <div id="container"> <h1>Sample</h1> <p>Another even longer sample text</p> </div> 

Here is a link showing an example; JSfiddle .

Answer 1

Based on the poster comment, it seems JavaScript is not a problem. Here is a possible approach to solve the jQuery problem:

JSFiddle 1

 function dynamicSpacing(full_query, parent_element) { $(full_query).css('letter-spacing', 0); var content = $(full_query).html(); var original = content; content = content.replace(/(\w|\s)/g, '<span>$1</span>'); $(full_query).html(content); var letter_width = 0; var letters_count = 0; $(full_query + ' span').each(function() { letter_width += $(this).width(); letters_count++; }); var h1_width = $(parent_element).width(); var spacing = (h1_width - letter_width) / (letters_count - 1); $(full_query).html(original); $(full_query).css('letter-spacing', spacing); } $(document).ready(function() { // Initial dynamicSpacing('#container h1', '#container'); // Refresh $(window).resize(function() { dynamicSpacing('#container h1', '#container'); }); }); 

Update

A little tweak when the wrapper gets too small: JSFiddle 2

Answer 2

This is obviously evil, but since there is no direct way to do this with css only, you could do: demo

HTML:

 <div>text</div> 

CSS

 div, table { background: yellow; } table { width: 100%; } td { text-align: center; } 

JS:

 var text = jQuery("div").text(); var table = jQuery("<table><tr></tr></table>").get(0); var row = table.rows[0]; for (var i = 0; i < text.length; i++) { var cell = row.insertCell(-1); jQuery(cell).text(text[i]); } jQuery("div").replaceWith(table); 

Answer 3

This can help:

 function fill(target) { var elems = target.children(); $.each(elems, function(i,e) { var x = 1; var s = parseInt($(e).css('letter-spacing').replace('px','')); while(x == 1) { if($(e).width() <= target.width() - 10) { s++; $(e).css('letter-spacing', s+'px'); } else { x = 0; } } }); } fill($('#test')); 

Note. If the letter spacing is: 0, you do not need to use the replace method. Or you can add the distance between the letters: 1px; into your css file.

To avoid overflow, always specify a minus number to the height of the parent element for proper operation.

Answer 4

Another approach I wrote for this question is Stretch text to fit the width of the div . It calculates and simplifies the markup of letters, so the text uses all the free space in the container when loading the page and when resizing the window :

Demo

HTML:

 <div id="container"> <h1 class="stretch">Sample</h1> <p class="stretch">Another even longer sample text</p> </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').each(function(){ $(this).strech_text(); }); $(window).resize(function () { $('.stretch').each(function(){ $(this).strech_text(); }); }); }); 

CSS:

 body { padding: 130px; } #container { width: 100%; background: yellow; } .stretch_it{ white-space: nowrap; } .justify{ text-align:justify; } 

Answer 5

Another solution, if you do not need to be semantic (because you will get a lot of spans), I mean, if you only need a visual result, use flexbox.

So you have <div id="#myText">TEXT 1</div>

We need to get the following:

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

So you can apply CSS:

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

To convert text to a range, you can use jQuery or something else. Here with 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)); } }); 

For best results, remove put-spacing: 0 in #myText so that the extra spacing is applied.