Change font height and width - html

Question

I want to change not the font-size of text, but two independent properties relative to its width and height.
So, by applying font-width: 50% to this element:
the text would be stretched to half:
Is this possible to do using CSS?

Answer 1

CSS transform has the scale function for this:
p {
display: inline-block;
font-size: 32px;
transform: scale(.5, 1);
}
<p>This is text.</p>
Use the two numbers in the function for X- and Y-axis respectively.

Answer 2

You can try scaling the font in x direction.
p{
-webkit-transform: scaleX(0.5);
transform: scaleX(0.5);
}

Answer 3

The closest thing I can find is font-weight
It accepts not only bold,normal but also numeric values. 100-900 in 100 increments.
. Paragraph {font-weight :700;}
This combined with height properties should help but will not give you complete solution
Also look at spacing properties as you can reduce the the width of the words that way
letter-spacing: 2px;

Answer 4

Using a svg text with preserveAspectRatio="none" allow text deformations and very precise positioning.
To adjust, It's all about the viewBox. The rendering stays natively responsive to browser resizes.
The text stays select able.
.title {
width: 540px;
height: 40px
}
.content {
width: 300px;
height: 400px
}
.side {
width: 270px;
height: 100px;
color: red;
position: absolute;
right: 30px;
top: 160px;
transform: rotate(44deg)
}
<div class="title">
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 15" width="100%" height="100%">
<foreignObject x="5" y="1" height="100%" width="100%">
<div>
Hello world!
</div>
</foreignObject>
</svg>
</div>
<div class="content">
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 400 200" width="100%" height="100%">
<foreignObject x="55" y="15" height="100%" width="80%">
<div>
The best way to use a hello cheer for introducing players is to have one cheerleader use a megaphone or loudspeaker to announce the players names and stats.
</div>
</foreignObject>
</svg>
</div>
<div class="side">
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
<foreignObject x="5" y="15" height="200%" width="100%">
<div>
NOW WITH COLORS!
</div>
</foreignObject>
</svg>
</div>
Tip: For complex stuffs, flyers making, using the cm css unit works very well.