How to Stretch Text Using CSS

Stretching text horizontally using CSS

Yes - you can achieve this by using CSS 2D transforms.

Here's a working JSFiddle.

Note that the example in the Fiddle/code below is for Chrome/Safari (WebKit), however, you can use 2D transforms in all major browsers by using the -moz-, -o-, and ms equivalent prefixes/methods!

HTML:

<span>Hello!</span>

CSS:

span {    
  transform:scale(3,1); 
  -webkit-transform:scale(3,1);
  display:inline-block; 
}

Support:

It is supported in Chrome, Firefox, IE9+ and Opera browsers.

How to stretch text in CSS like microsoft word?

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);

How to stretch font height wise using CSS?

Try this:

p {  display: inline-block;  font-size: 32px;  transform: scale(.5, 1);}

<p>This is text.</p>

How to stretch text to occupy full height and width

Bit of a horrible answer but it's the only way I can think of doing it. You'd need to add a container and then use the scale transform

.container {
  -ms-transform: scale(1.87, 1.16);
    -webkit-transform: scale(1.87, 1.16);
    transform: scale(1.87, 1.16);
    margin-left: 91px;
    margin-top: 2px;
}

full method below

http://jsbin.com/fiqixudamo/1/edit?html,css,js,output

How to make text inside a grid stretch

Use auto-fit instead.

ul {
  display: grid;
  max-width: 800px;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-template-rows: auto;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #aaa;
  padding: 0;
}

li {
  margin: 0 10px;
  list-style-type: none;
  cursor: pointer;
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
}

<ul>
  <li>ALL</li>
  <li>New One</li>
  <li>777</li>
  <li>Test two</li>
  <li>Test</li>
</ul>