1

Is it possible to dynamically stretch a text width to its parent’s witdh? In other words, I am looking to get the following result but dynamically. Solutions that require Javascript are ok.

div{
  width:260px;
  border:1px solid tomato;
  background:white;
  font-size:20px;
  font-family:arial;
}
.p1{
  transform:scale(2.3,1);
  -webkit-transform:scale(2.3,1);
  -moz-transform:scale(2.3,1);
  -ms-transform:scale(2.3,1);
  -o-transform:scale(1,1.09);
  transform-origin: 0 0;
}
.p2{
  transform:scale(5.1,1);
  -webkit-transform:scale(5.1,1);
  -moz-transform:scale(5.1,1);
  -ms-transform:scale(5.1,1);
  -o-transform:scale(5.1,1);
  transform-origin: 0 0;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>TEEEEXT</title>
</head>
<body>
<div>
  <p class="p1">This is a test</p>
  <p class="p2">A test</p>
</div>
</body>
</html>
web-tiki
  • 99,765
  • 32
  • 217
  • 249
1213
  • 706
  • 2
  • 8
  • 25
  • 1
    There is a solution here using jQuery to calculate letter-spacing so text fills width of container : [Stretch text to fit width of div](http://stackoverflow.com/questions/5976289/stretch-text-to-fit-width-of-div) – web-tiki Jan 15 '15 at 10:49
  • Thanks @web-tiki it doesn’t solve my issue but it is a useful resource. – 1213 Jan 15 '15 at 12:08
  • Were you ever able to find a solution? I would have thought someone would have figured this out by now, but apparently it's a rare design need. I haven't found anything that quite cuts it, aside from fittext, which as you already noticed, resizes proportionately. – Chase Dec 29 '15 at 02:04
  • 1
    @chase I think the solution for now is to use SVG like that http://opensource.london/ – 1213 Dec 29 '15 at 13:24
  • Cool, thanks. Luckily what I'm stretching is just days/months/dates so I knew SVG was an option, but was trying to avoid it... But, whatever get's the job done! Thanks for the reply – Chase Dec 29 '15 at 20:19

1 Answers1

1

I would recommend the jQuery plugin "FitText" (http://fittextjs.com)

Example:

$('#div').fitText();

It automatically adjusts the selector's font-size to fit the div. There are of course further options that can adjust max- and min-size for example.

Gustaf Gunér
  • 2,272
  • 4
  • 17
  • 23
  • But the site explicitly warns aginst use on paragrapgh text! :) "_Oh, and don't you dare let us catch you using FitText on paragraph text. This is for gigantic display text only!_" – cspete Jan 15 '15 at 11:26
  • Thank you but I need the text *not* to be proportionally stretched as my demo shows. – 1213 Jan 15 '15 at 12:07