CODEWITHSUNDEEP
css
user1834464
user1834464

Reputation:

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

Say the div have 300px of width, how would I set the font-size of the text, so that it would always take 100% of the width, considering the text is never the same length (the text is some dynamic titles generated by php). Smaller text would have to have a font a lot smaller than the bigger text, etc

Upvotes: 55

Views: 178341

Answers (6)

Madson Germano
Madson Germano

Reputation: 41

Here is away to do it without the extra line problem: just add margin-bottom to the div

(I'm using SCSS)

div {
    text-align: justify;
    margin-bottom: -1em !important;

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

Upvotes: 0

patrick
patrick

Reputation: 11721

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!

Upvotes: 19

Maciej Korsan
Maciej Korsan

Reputation: 115

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

Upvotes: 2

pomber
pomber

Reputation: 23980

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>

Upvotes: 5

apartridge
apartridge

Reputation: 1820

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.

Upvotes: 13

svassr
svassr

Reputation: 5668

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

Upvotes: 52

Related Questions