Tips for positioning spans or text within a paragraph from the right to left direction

Question

Tips for positioning spans or text within a paragraph from the right to left direction

I've been trying to find a simple CSS solution that will allow me to start the content of a paragraph from the end. I've experimented with properties like text-align, text-align-last, text-orientation and others, but haven't had any luck so far.

Here 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>

https://i.sstatic.net/MOtYi.jpg

Currently, the spans wrap, with the last span moving to the second line. What I'm aiming for is to have four of them on the last line, with the wrapping span moving to the first line. Essentially, I want to start the paragraph from the end.

html css styles

Answer 1

Answer №1

To achieve this layout, you can utilize the flex property along with flex-direction. Start by setting the parent element to display: flex. Then, apply flex-direction: row-reverse to reverse the content within the parent element. For wrapping the content, you can use wrap-reverse in the flex-wrap property. This should give you the desired result.

.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 approach would be to use display grid for the layout.

.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>

Answer 2

To achieve this layout, you can utilize the flex property along with flex-direction. Start by setting the parent element to display: flex. Then, apply flex-direction: row-reverse to reverse the content within the parent element. For wrapping the content, you can use wrap-reverse in the flex-wrap property. This should give you the desired result.

.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 approach would be to use display grid for the layout.

.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>

Tips for positioning spans or text within a paragraph from the right to left direction

Answer №1

Similar questions

Personalizing the dimensions of audio.js

When placed within a <li> element, the <a> tag will not create a hyperlink to a page, but it will

Adjusting the dimensions of the canvas leads to a loss of sharpness

Unable to load Webfont Trade Gothics in Internet Explorer 8

Issues with mobile stylesheet loading properly

Difficulty in arranging DIVs on a flat surface

Resizing with Jquery results in sudden movement

The <a> element does not direct to a different webpage

The right margin is left untouched by Bootstrap

An intriguing inquiry regarding HTML form intricacies

Ensure that both tables contain columns of equal size

Is there a way for me to prioritize the sidebar over the main content on the page

Effortlessly switch between multiple divs with jQuery

The issue of the JQuery div failing to center itself persists even after refreshing the page

Assistance needed with incorporating an additional link button into the extensive menu

Implementing a Timer on an HTML Page with JavaScript

Scraping Websites with Php cURL

How can I improve the empty space in HTML after PHP processing?

Hover effect within nested CSS styling applied to the list item element

Creating a video game HUD effect using JavaScript and HTML5