Wordやillustratorなどで、文字を1行に納めたかった場合、文字の横幅を90%等潰して、行内に納めたりすると思いますが、WEB上でも同様なことをしたい。
例えば、タイトルなどを1行に納めたいときに文字を90%にするCSSの設定です。結論から言うと、

display: inline-block; 
transform: scale(0.7,1);
width:143%;
transform-origin: top left;

transformだけで終われば楽なんですが、他に3つの要素を加えないといけないので、簡単に説明しておきます。まずは初期状態が以下になります。

初期状態
display: inline-block;

まず横幅をつぶせるよう、インライン要素をブロック要素に変更していきますが、横並びでいいので、インラインブロックを指定します。最初からブロック要素である場合は、これは設定する必要がないです。  

transform: scale(0.7,1);

横幅をつぶすにはtransform: scale(横倍率,縦倍率)を使います。今回は横幅を70%にしています。

つぶれたが左右に余白
width:143%;

横幅がつぶれましたが、中央寄せで70%サイズになり、左右に余白を持ったまま折り返す状態になっています。これを元の横幅に戻します。70%は7/10をかけた結果なので、逆数の10/7をかけます。10÷7=1.428なので、だいたい143%

70%の文字サイズで1行に納まったが、左側の余白が残ったままで、右にはみ出している
transform-origin: top left;

最初のtransformの設定の段階で、基準が上下左右とも真ん中にあったため、左右が縮んでしまいました。これを、左上を基準に変形を開始するように基準位置を変更します。

おすすめの記事