html - 如何左对齐文本？

Question

我有一个包含两个步骤的脚本，我想对齐文本，例如:

Step1 : I am a boy........
my name is Ram```

但我想将文本对齐为

Step1 : I am a boy........
        my name is Ram```

我尝试了 text-align 和 align 属性来跨越。

p.steps {
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
  font-family: 'Montserrat';
  line-height: 1.2;
  margin-top: 20px;
  text-align: left;
}

<p class="steps"> <span style="color:#BB2812">Step1 : </span> I am a boy................. my name is Ram</p>
<p class="steps"> <span style="color:#BB2812">Step2 : </span> There are many countries but I live in Australia </p>

Answer 1

表格布局可以解决问题

p.steps {
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
  font-family: 'Montserrat';
  line-height: 1.2;
  margin-top: 20px;
  text-align: left;
  display:table; /* here */
}
p.steps span {
  display:table-cell; /* here */
  white-space:nowrap; /* and here */
  padding-right:5px;
}

<p class="steps"> <span style="color:#BB2812">Step1 : </span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque urna at ex fermentum egestas. Nullam convallis nec dolor finibus rhoncus. Nunc neque nisi,</p>
<p class="steps"> <span style="color:#BB2812">Step2 : </span> There are many countries but I live in Australia </p>