Как выровнять текст по левому краю

Question

У меня есть сценарий, который состоит из двух шагов, и я хочу выровнять текст, например:

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

Но я хочу выровнять текст так, как показано ниже:

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

Я попробовал атрибуты text-align и align для span.

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>
Full pag

_{Свободный перевод вопроса How to align left the text? от участника @Muddasar Saiyed.}

Answer 1

Разметка table сделает свое дело:

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; /* здесь */
}
p.steps span {
  display:table-cell; /* здесь */
  white-space:nowrap; /* и здесь */
  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>

_{Свободный перевод ответа от участника @Temani Afif.}

Answer 2

Есть много возможных решений (table, flex, text-indent и т.д.), Но пока это упорядоченный список, я бы использовал ol и li, чтобы код был семантически правильными. Вы можете создать свой собственный элемент в стиле списка с псевдоэлементом :before, который может реализовать elementcounter.

ol {
  list-style-type: none;
  counter-reset: elementcounter;
  padding-left: 0;
}
li {
   position: relative;
   padding-left: 3.5rem;
}
li:before {
  content: "Step " counter(elementcounter) ":";
  counter-increment: elementcounter;
  font-weight: bold;
  position: absolute;
  left: 0;
  top: 0;
}

<ol>
   <li>I am a boy...<br/> my name is Ram</li>
   <li>There are many countries but I live in Australia</li>
</ol>

_{Свободный перевод ответа от участника @Jax-p.}

Answer 3

Есть много способов сделать это. Вы можете реализовать это с помощью flexbox.

Добавьте display: flex к элементу p.

p.steps {
  display: flex;

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

.step {
  display: block;
  
  color: #BB2812;
}

.step-content {
  flex: 1;
}

<p class="steps">
  <span class="step">Step 1:</span>

  <span class="step-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada non ex consectetur posuere. Vestibulum in leo tempus dolor pharetra ultricies.
  </span>
</p>

<p class="steps">
  <span class="step">Step 2:</span>

  <span class="step-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi malesuada non ex consectetur posuere. Vestibulum in leo tempus dolor pharetra ultricies.
  </span>
</p>

_{Свободный перевод ответа от участника @Magiczne.}

БЛОГ НА HUSL

Как выровнять текст по левому краю

Ответы (3 шт):