How to align spans or text in paragraph from end to start

Question

I wonder if there is a simple CSS solution to start a content of paragraph from the end of it. I've tried text-align, text-align-last, text-orientation and other properties that might do the trick, but didn't find any luck so far.

This is the code snippet I have:

<p class="tags_holder">
  <span class="record_tag">HTML5 canvas</span>
  <span class="record_tag">Adoby Animation</span>
  <span class="record_tag">Timelines</span>
  <span class="record_tag">Flash Movie</span>
  <span class="record_tag">Event Sounds</span>
</p>

So it wraps spans taking last span to the second line. What I want is to have four of them on the last line taking the wrapping one to the first line. Like starting the paragraph from the end.

Answer 1

You can use flex with flex-direction to achieve this. Set your parent element to display: flex. Then use flex-direction: row-reverse, this will literally reverse the content of the parent. On the flex-wrap property, you can use wrap-reverse. Pretty sure this is what you're looking for.

.tags_holder {
  display: flex;
  justify-content: start;
  flex-direction: row-reverse;
  width: 550px;
  background: #222;
  flex-wrap: wrap-reverse;
  font-family: sans-serif;
}

.record_tag {
  margin: .5rem;
  border-radius: .5rem;
  padding: .5rem;
  background: #333;
  color: #DDD;
}

<p class="tags_holder">
  <span class="record_tag">HTML5 canvas</span>
  <span class="record_tag">Adoby Animation</span>
  <span class="record_tag">Timelines</span>
  <span class="record_tag">Flash Movie</span>
  <span class="record_tag">Event Sounds</span>
</p>

Another way to do this would be to use display grid.

.tags_holder {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "five . . ." 
    "four three two one";
  width: 550px;
  background: #222;
  font-family: sans-serif;
}

.five {
  grid-area: five;
}

.four {
  grid-area: four;
}

.three {
  grid-area: three;
}

.two {
  grid-area: two;
}

.one {
  grid-area: one;
}

.record_tag {
  margin: .5rem;
  border-radius: .5rem;
  padding: .5rem;
  background: #333;
  color: #DDD;
}

<p class="tags_holder">
  <span class="record_tag one">HTML5 canvas</span>
  <span class="record_tag two">Adoby Animation</span>
  <span class="record_tag three">Timelines</span>
  <span class="record_tag four">Flash Movie</span>
  <span class="record_tag five">Event Sounds</span>
</p>