CSS | 文字数の違う単語テキストを両端揃えにする方法
CSSでそれぞれ文字数の違う単語のテキストを行単位で両端揃えにする方法を紹介しています。
「方法」と書いていますが、実際は手動で調節しているだけですので期待はできません。
文章テキストの両端揃え方法については以下の記事で紹介しています。
https://1-notes.com/css-justify-the-text/単語テキストを両端揃えにする
単語テキストを両端揃えにする方法です。
この方法は、親要素の横幅が固定値で決まっている時にのみ有効です。
レスポンシブには対応できていません。
See the Pen CSS | Justify the text 1 by yochans (@yochans) on CodePen.
サンプルHTMLでは文字数の違うテキストをいれたpタグを3つ作成。
それぞれにclass名は付与していませんが、両端揃えの指定部分はnth-child()を使って個別に指定しています。
<div class="container">
<p>CSS</p>
<p>HTML</p>
<p>Javascript</p>
</div>親要素になるコンテナ部分の横幅を指定、それに合わせて横幅いっぱいでの表示になるようにletter-spacingで字間を調節しています。
単位はem（文字サイズを参照）を指定しています。
em指定の場合は、1emで一文字分の字間が入ります。
小数点以下まで調節が有効ですので、丁度良い字間を見つけて指定していきます。
calc()などで、ある程度でも自動的に算出できれば良いのですが、親要素サイズ・文字サイズ・padding・marginなど影響する要素が多すぎて諦めました。
レスポンシブにする場合や自動計算で両端揃えにしたい場合は、JavaScriptなどで制御した方が簡単そうです。
.container {
width: 250px;
}
.container p{
margin: 0;
padding: 0 4px;
font-size: 40px;
color: #1e90ff;
}
.container p:nth-child(1){
letter-spacing: 2.05em;
}
.container p:nth-child(2){
letter-spacing: 1.07em;
}
.container p:nth-child(3){
letter-spacing: .13em;
}