CSS Deformable text - css

Question

I need to create a text that adapts to the size of its container DIV, distorting itself to always fill the whole space inside the DIV. So it should be always width=100% and height=100% and resize according to the browser window.
I know this can be done with an image, my doubt is if there is any way to do the same to a editable text, deforming the font shapes itself. Which property should I use?
Thank you in advise.

Answer 1

Option 1
We are going to use Javascript to change dynamically the font-size and line-height
First, cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('.foo');
Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
Get the current height of the div and save it as a variable.
var height = $div.height();
Set the font-size and line-height of the text within the div according to the current height.
$div.css({
'font-size': (height/2) + 'px',
'line-height': height + 'px'
})
}).trigger('resize');
Demo: https://jsfiddle.net/nanilab/6tpztvnc/
Option 2
You can use FitText.js
FitText makes font-sizes flexible. Use this plugin on your responsive design for ratio-based resizing of your headlines.
Option 3
You can use slabText.js
A jQuery plugin for producing big, bold & responsive headlines

Answer 2

Check out the CSS Viewport percentage lengths, this might be what you're looking for: https://css-tricks.com/viewport-sized-typography/
I put together a quick container with text that will change size based on the size of the viewport. You can check it out here: http://codepen.io/sktwentysix/pen/GZzvEx
<div class="main">
<p>
lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum lorum ipsum!
</p>
</div>
.main {
border: 1px solid #000;
padding: 1rem;
width: 80%;
height: 500px;
}
p {
margin: 0;
font-size: 4vw;
}
Hope this helps!

Answer 3

only CSS will not be possible unless the lenght of your text is known.
If it is known, vw units + transform will do .
Problems : long text on small window could be too small to be read
Short text on large screen will be awfully stretched
h1 {
height: 3vw;
background: #147EBD;
text-align: center;
}
span {
display: inline-block;
height: inherit;
line-height: inherit;
font-size: 10vw;
transform-origin: top center;
transform: scale(1, 0.3);
}
h1 + h1 span {
line-height: 40vw;
font-size: 40vw;
transform: scale(1, 0.08);
}
<h1> <span>longer text to strecth </span></h1>
<h1> <span>short</span></h1>
As you can see, javascript will be needed to find out text lenght before to apply a font-size and a proper scale to start with .
It would be wise somehow to still set a max and min font-size so it remains readable at anytime time, and eventually let break a line on small screen.
edit: i did understand 100% of container, not window's height but scale() will do also in this case.