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

Question

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

See this: http://stackoverflow.com/questions/6803016/css-100-font-size-100-of-what... And this: http://stackoverflow.com/questions/10718840/make-text-height-100-of-div. Hope those post help you! — leoMestizo, Jul 09 '13 at 00:40
Possible duplicate of [Force single line of text in element to fill width with CSS](https://stackoverflow.com/questions/21199057/force-single-line-of-text-in-element-to-fill-width-with-css) — atilkan, Jun 09 '17 at 09:40

score 44 · Answer 1 · edited May 23 '17 at 12:25

44

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

edited May 23 '17 at 12:25

Community

1
1

answered Oct 21 '14 at 23:15

svassr

5,538
5
44
63

Originally: https://stackoverflow.com/questions/21199057/force-single-line-of-text-in-element-to-fill-width-with-css – atilkan Jun 09 '17 at 09:39
I removed `content: "";` and it still works while not adding new line. – Eggon Feb 22 '21 at 17:46
i removed the second style (div:after) and it works. it is the same effect like deleting (content: "";) – com.on.ist Jul 11 '22 at 09:15

score 18 · Answer 2 · answered Apr 03 '18 at 11:42

18

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!

answered Apr 03 '18 at 11:42

patrick

11,519
8
71
80

Thanks for that `vw`-hint. Just had to add `text-justify: inter-character;` to my styles, to have all chars across the full container width. – FibreFoX Dec 25 '20 at 16:21

score 13 · Answer 3 · edited Jan 28 '15 at 04:40

13

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.

edited Jan 28 '15 at 04:40

simonzack

19,729
13
73
118

answered Jul 09 '13 at 00:38

apartridge

1,790
11
18

score 5 · Answer 4 · answered Oct 29 '16 at 22:16

5

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>

answered Oct 29 '16 at 22:16

pomber

23,132
10
81
94

score 2 · Answer 5 · answered Mar 07 '17 at 10:59

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

Again, OP is looking for a css solution. – m02ph3u5 Mar 07 '17 at 11:22 — m02ph3u5, Mar 07 '17 at 11:22

score 0 · Answer 6 · answered Nov 09 '21 at 18:55

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

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

6 Answers6

Linked