1

I'm trying to get the contents of a h1 element to adjust the font size in order to ensure that the text fills exactly 100% of the width of its parent div.

I've tried a few different plugins, including fittext.js, slabtext.js and bigtext.js, but can't get any to work.

Does anyone have any idea how I could get this kind of effect in the example below for the .sectionTitle h1 elements.

Codepen: https://codepen.io/anon/pen/NpYJKK.

Example HTML:

 <section id="contact">

   <div class="sectionContent">

     <h1 class="sectionTitle">Contact</h1>

   </div>

 </section>
azurefrog
  • 10,451
  • 7
  • 40
  • 53
  • Maybe if you use a span inside the h1 you could programatically increase the span's font size until the span width matches the h1 width. – Andre Paschoal Mar 22 '17 at 11:10
  • I'm not sure what you mean or how I'd do that. –  Mar 22 '17 at 11:11
  • Please don't attempt to remove your question via vandalism. If you want to communicate with other posters, you can leave a comment on your question, or even edit it to add notes, but you shouldn't remove the content itself, especially when there are upvoted answers on it. – azurefrog Mar 22 '17 at 21:04

2 Answers2

0

FitText.js should do what you need.

Add the necessary js files, and then add this line to your code:

jQuery(".sectionTitle").fitText(.5);

Note that a compression value of .5 seemed to be necessary to make your text stretch full width.

codepen demo

sol
  • 20,947
  • 5
  • 36
  • 56
  • Only one of the elements actually fills the full width of the viewport –  Mar 22 '17 at 11:52
-2

Use vw property: 

font-size:100vw;
Jai
  • 72,925
  • 12
  • 73
  • 99
  • 2
    That just makes each letter 100vw, doesn't make the entire h1 contents fit to 100vw –  Mar 22 '17 at 11:49
  • try something like `20vw` – Jai Mar 22 '17 at 12:02
  • That won't make the text within the h1 fill exactly 100% of the parent, that just changes the size of the individual letters rather than adapting the font size for each DIFFERENT element to ensure it fills the width of the parent. If the sectionTitle element is a different length on each section, the font size is going to need to be adjusted for each to fit to the parent's width –  Mar 22 '17 at 12:05