How to make text take full width of it's container?

Question

this did the trick for me

div {
  text-align: justify;
}

div:after {
  content: "";
  display: inline-block;
  width: 100%;
}

However using that trick I had to force the height of my element to prevent it for adding a new empty line.

I took that answer from Force single line of text in element to fill width with CSS

Also have look here for explanations: http://blog.vjeux.com/2011/css/css-one-line-justify.html

The solution provided by @svassr combined with font-size: *vw gave me the desired result. So:

div {
  text-align: justify;
  font-size: 4.3vw;
}

div:after {
  content: "";
  display: inline-block;
  width: 100%;
}

the vw stands for viewport width, in this example 4.3% of the width of the viewport. Play around with that to get your text fit on one line. Combined with @svassr's solution this worked like a charm for me!

What you ask can probably not be done. text-align:justify will make paragraph text extend to the right side, but you cannot adjust the size of a header so its 100% of the width.

Edit: Well, actually, a JS library exist that seems to do this. http://fittextjs.com. Still, no pure-CSS solution is available.

I've created a web component for this:
https://github.com/pomber/full-width-text

Check the demo here:
https://pomber.github.io/full-width-text/

The usage is like this:

<full-width-text>Lorem Ipsum</full-width-text>

I've prepared simple scale function using css transform instead of font-size.

Blog post: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

The code:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

Working demo: https://codepen.io/maciejkorsan/pen/BWLryj