CSS: Letter-spacing percent to completely fit the div container

Question

i need to fit completely a text in a 100% width div container.

I attempted using letter-spacing but it looks like only accepts px/em, and not percent values.. but that wont be responsive (e.g. resizing window).

This is what i got: http://jsfiddle.net/3N6Ld/

Should i take another approach? Any ideas? Thank you

Unctuous

Answer 1

If you know how many letters you have you can sort of achieve this using the vw (viewport width) unit.

In the below example I've used a value of 14.29vw, as 100 (100% of the width of the window) divided by 7 (the number of letters in the word "CONTENT") is roughly 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>

If you want to make the "T" closer to the right edge you can increase the letter-spacing a little. For Stack Overflow's code snippets, setting it to 14.67vw does the 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>

Kantos

Quirky ;) - I like. I suppose you could use JS to count the length and set appropriately too if dynamic. – Botel

+1 for the CSS solution. I guess in a more complex html (and responsive) structure it wont be enough without some js code in addition, considering that the window width may not always be "relative" to our div container (for instance if i give it a max-width). Anyway great answer, thank you – Unctuous

Answer 2

Another solution if you don't have to be semantic, I mean if you need only the visual result, is to use flexbox.

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

We need to get this:

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

So then you can apply CSS:

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

In order to transform the text to span you can use jQuery or whatever. 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 better results remove put letter-spacing: 0 into #myText so any extra spacing will be applied.

Woolf

This is a stroke of genius. I used justify-content:center because justify-content:space-between for smaller words made it look weird. Thanks for the tip! – Mullen

A couple other thoughts - add #myText > span { min-width:0; } to your css to make sure the letters can condense upon themselves if needed. Also, no need for an if() statement, just use v.replace(' ',' ') – Mullen

Answer 3

I wrote a jQuery snippet that calculates the letter spacing to apply so that the text uses the whole width of it's container : Stretch text to fit width of div.

You may apply it to the text and fire it on window resize so letter-spacing is recalculated when the browser is resized :

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

Heritable

You are fantastic. This is the most responsive and easiest way to get the task done. 👌🏻👌🏻👌🏻👌🏻👌🏻👌🏻👌🏻👌🏻 – Fluidextract

Answer 4

Here I solved this.

# HTML:

    <div class="header-sub-brand">
    <span>M</span>
    <span>A</span>
    <span>I</span>
    <span>L</span>
    <span>D</span>
    <span>O</span>
    <span>L</span>
    <span>L</span>
    </div>

# CSS:

    .header-sub-brand {
       font-weight: 500;
       font-size: 12px;
       display: flex;
       justify-content: space-between;
    }

Patrimony