44

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:

enter image description here

the text would be stretched to half:

enter image description here

Is this possible to do using CSS?

cabralpinto
  • 1,814
  • 3
  • 13
  • 32
  • 1
    "if your lazy here is a fiddle". Not sure how that's going to go down. With this jquery could help. Where you create a number and change 2 css properties. Just to be clear you want to control width and height of text independently. How are you controlling the width at the moment – Fintan Creaven Oct 04 '15 at 10:12
  • http://stackoverflow.com/questions/15649244/responsive-font-size This might help – Skaudel Oct 04 '15 at 10:14
  • There is a font-width-stretch property in css but it's currently unsupported by all the major browsers – Fintan Creaven Oct 04 '15 at 10:16
  • You can use font weight. – Fintan Creaven Oct 04 '15 at 10:18

4 Answers4

81

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.

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
13

You can try scaling the font in x direction.

p{
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}
Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
Aakash
  • 1,751
  • 1
  • 14
  • 21
5

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;
Fintan Creaven
  • 250
  • 2
  • 17
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.

NVRM
  • 11,480
  • 1
  • 88
  • 87
  • is there a "auto" property value to adjust the viewbox automatically to show everything ? (when you don't know the length of the text). – mikakun Nov 30 '22 at 02:21
  • 1
    You could just use regular CSS, like: `overflow-wrap` on the `div`. https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap – NVRM Nov 30 '22 at 16:33
  • thanks ! i'll try it & will let you know (on stg else right now) – mikakun Dec 04 '22 at 14:51