【HTML&CSS】改行後の文章のズレについて

<問題概要>

写真の用に改行した後の文字を正しい位置に戻したいと思っています。
（EnglishをStudyの頭の位置に持ってきて揃えたい）

<前提>
・記述してあるコードに沿っている回答がえられると嬉しいです。

<試したこと>
・text-indent: これでは10からStudy Englishまでが全て動いてしまいます。

<現段階のソースコード>

HTML
1<h5 class="text"><span class="smallfigure">10</span>STUDY<br>ENGLISH</h5>

scss
1.title{
2      font-size:13px;
3      font-family: 'Prompt', sans-serif;
4      font-weight:400;
5      width:220px;
6      .small-figure{
7               color:$font-blue;
8               font-size:13px;
9               font-family: 'Prompt', sans-serif;
10               font-weight:400;
11               margin-right:26px;
12      }
13   }

よろしくお願いします！

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

回答2件

現状のHTML、CSSではそうなるのが正しい配置です。

・記述してあるコードに沿っている回答がえられると嬉しいです。

10だけ特別扱いすることになりますので、position: absolute; で位置決めすればどうでしょうか。
ご希望に沿っているかどうかは分かりませんが。

css
1.title{
2  font-size:13px;
3  font-family: 'Prompt', sans-serif;
4  font-weight:400;
5  width:220px;
6  margin-left: 40px;
7  position: relative;
8  .small-figure{
9    font-size:13px;
10    font-family: 'Prompt', sans-serif;
11    font-weight:400;
12    position: absolute;
13    left:-40px;
14  }
15}

投稿2020/04/23 10:17

編集2020/04/23 23:05

hatena19

総合スコア34075

yuto_urushima

2020/04/24 01:11

回答ありがとうございます！参考になる回答でした！

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

ベストアンサー

.titleが何を指しているのかわからないので取り合えず.textにしてしまいましたが、どちらにせよtext-indent分をpadding-leftでずらせばいいです。

html
1<h5 class="text"><span class="smallfigure">10 </span>STUDY<br>ENGLISH</h5>

scss
1.text {
2  font-size: 13px;
3  font-family: "Prompt", sans-serif;
4  font-weight: 400;
5  width: 220px;
6  padding-left: 1.5em;
7  text-indent: -1.5em;
8  .small-figure {
9    font-size: 13px;
10    font-family: "Prompt", sans-serif;
11    font-weight: 400;
12    margin-right: 26px;
13  }
14}