How to stretch text in CSS like microsoft word?

Question

I want to stretch text (like ms-word) using CSS or some other possible technique.
Following CSS is not actually stretching anything:

font-stretch:ultra-expanded;

Please redirect me if I am wrong.
Thank you in advance.

By stretching do you mean: 1) Adding white space between words. 2) Adding white space between letters. 3) Making each letter broader. ... or a combination thereof ??? — Ole Sauffaus, Jul 24 '15 at 06:54
I don't know about ie but I checked it in the latest version of firefox which is not working — Andle, Jul 24 '15 at 06:55
possible duplicate of [setting character width with css](http://stackoverflow.com/questions/15262094/setting-character-width-with-css) — Ole Sauffaus, Jul 24 '15 at 07:22

score 3 · Answer 1 · answered Jul 24 '15 at 07:14

3

You can use CSS Transforms, like

h2 {
  width: 50%;
  margin: auto;
  transform: scaleX(2);
}

<h2>Stretched text</h2>

But usually distorting fonts is not a good idea. Probably it's better to look for a web font that initially looks as you need.

answered Jul 24 '15 at 07:14

Ilya Streltsyn

13,076
2
37
57

You would need vendor-prefixes for that to work ... like this: `-webkit-transform:scale(1,2); -moz-transform:scale(1,2); -ms-transform:scale(1,2); -o-transform:scale(1,2); transform:scale(1,2);` – Ole Sauffaus Jul 24 '15 at 07:16
1

@OleSauffaus, `-moz-transform` and `-o-transform` are not really needed anymore, all versions of Mozilla and Opera that are in practical use currently understand the unprefixed standard syntax. Only `-webkit-` may still be needed for mobile browsers like Android Browser 4.3-, and `-ms-` is yseful for just IE9. – Ilya Streltsyn Jul 24 '15 at 07:23
I just realised that ... but still ... might come in handy for someone :) – Ole Sauffaus Jul 24 '15 at 07:24

Rashid · Accepted Answer · 2017-04-01T06:43:00.417

3

font-stretch (characters itself) can be achieved by css3's transform:scaleX() and transform:scaleY() properties in which dimension you want to stretch.
Here is cross browsers compatible CSS:

-webkit-transform:scaleX(2);
-moz-transform:scaleX(2);
-ms-transform:scaleX(2);
-o-transform:scaleX(2);
transform:scaleX(2);

edited Apr 01 '17 at 06:43

answered Jul 24 '15 at 07:16

Rashid

1,244
3
13
29

Ole Sauffaus · Answer 3 · 2015-07-24T07:10:22.610

0

Some of the options in CSS:

.broader {
    letter-spacing:0.5em;
    word-spacing:1.5em;
    text-align: justify;/* Fills to parents borders */
}

font-stretch isn’t supported by others than IE+FireFox ... look here: http://caniuse.com/#search=font-stretch

Besides font-stretch won’t actually make any font wider, it will just substitute current font with a wider variant ... kinda like font-style:bold/italic does.

edited Jul 24 '15 at 07:10

answered Jul 24 '15 at 06:57

Ole Sauffaus

534
3
13

nice but I want to stretch the characters itself – Andle Jul 24 '15 at 07:03

How to stretch text in CSS like microsoft word?

3 Answers3