43

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?

4
  • 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 Oct 4, 2015 at 10:12
  • stackoverflow.com/questions/15649244/responsive-font-size This might help
    – Skaudel
    Oct 4, 2015 at 10:14
  • There is a font-width-stretch property in css but it's currently unsupported by all the major browsers Oct 4, 2015 at 10:16
  • You can use font weight. Oct 4, 2015 at 10:18

4 Answers 4

79

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.

0
13

You can try scaling the font in x direction.

p{
    -webkit-transform: scaleX(0.5);
    transform: scaleX(0.5);
}
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; 
2
  • 5
    Width is not weight.
    – Magician
    Jan 22, 2019 at 23:57
  • this is a simple solution, I like it. Mar 21, 2019 at 9:00
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.

3
  • 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, 2022 at 2:21
  • 1
    You could just use regular CSS, like: overflow-wrap on the div. developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap
    – NVRM
    Nov 30, 2022 at 16:33
  • thanks ! i'll try it & will let you know (on stg else right now)
    – mikakun
    Dec 4, 2022 at 14:51

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.