HTML/CSSで横幅に合わせて文字間隔を調整したい

文字数の違う複数行のテキストを横幅に合わせて文字間隔を設定したいです．

イメージ
T E S T
T E S T
TESTTES

コードを書いてみたのですが，最後の文字列だけ最初にスペースが入ってずれてしまいます．
改善方法や他にもっと簡単な方法があれば教えてください．

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4   <meta charset="utf-8">
5   <title></title>
6   <link rel="icon" href="./img/favicon.ico">
7   <link rel="stylesheet" href="./css/main.css">
8   <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
9</head>
10<body>
11  <header>
12    <p class="fonts">hogeho<br>hogeho<br><span class="sub">hogehogeh</span></p>
13  </header>
14
15  <footer>
16  </footer>
17</body>
18</html>
19

css
1body{
2  width: 100%;
3}
4
5.fonts{
6  font-family: 'Source Code Pro';
7}
8
9header{
10  text-align: center;
11}
12
13header p{
14  display:inline-block;
15  text-align: center;
16  margin: 0 auto;
17  font-size: 64px;
18  letter-spacing: 0.7em;
19}
20
21.sub{
22  letter-spacing: 0.21em;
23}
24

行動規範の内容に同意します

回答1件

ベストアンサー

css
1header p {
2	text-align: justify;
3	text-align-last: justify;
4	text-justify: inter-character;
5}

text-justify - CSS: カスケーディングスタイルシート | MDN
text-align-last - CSS: カスケーディングスタイルシート | MDN

投稿2020/02/27 06:10

Lhankor_Mhy

総合スコア37409

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

HTML/CSSで横幅に合わせて文字間隔を調整したい

関連した質問