Wordやillustratorなどで、文字を1行に納めたかった場合、文字の横幅を90％等潰して、行内に納めたりすると思いますが、WEB上でも同様なことをしたい。
例えば、タイトルなどを１行に納めたいときに文字を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％
transform-origin: top left;
最初のtransformの設定の段階で、基準が上下左右とも真ん中にあったため、左右が縮んでしまいました。これを、左上を基準に変形を開始するように基準位置を変更します。
