How to align left the text?

user_8386150 0
Viewed 113

I have the script which has the two steps and I want to align the text for example:

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

But I want to align the text as

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

I tried text-align and align attribute to 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>

css html
5 Answers

table layout will do the trick

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>

user_86203330

There are many ways to do it. You can do it using flexbox.

Add display: flex to the p element.

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>

user_71018760

There are a lot of possible solutions (table,flex,text-indent, etc.) but as long as it is ordered list I would use ol and li to be semantically correct. You can create your own list-style like element with :before pseudo element which can implement 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>

user_55970170

Simple approach you an use div.

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;
}
<div class="steps">
  <div style="color:#BB2812;    float: left;
    width: 8%;">Step1 : </div>
  <div style="float: left;
    width: 91%;"> I am a boy................. <br>my name is Ram</div>
</div>
<div class="steps">
  <div style="color:#BB2812;    float: left;
    width: 8%;">Step2 : </div>
  <div style="float: left;
    width: 91%;">There are many countries but I live in Australia </div>
</div>

user_62850540

This feels like a solution that can be achieved the best by modifying dt/dd with grid lay-out. Here's an example:

.steps {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0.5em 0;
  
  color: #000;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: normal;
  font-family: 'Montserrat';
  line-height: 1.2;
  margin-top: 20px;
  text-align: left;
}
.steps dt {
  color: #BB2812;
}
.steps dt::after {
  content: ' : ';
}
<dl class="steps">
  <dt>Step 1</dt>
  <dd>I am a boy.................<br>my name is Ram</dd>
  <dt>Step 2</dt>
  <dd>There are many countries but I live in Australia</dd>
</dl>

user_63643990
Related