如何从头到尾对齐段落中的跨度或文本

Question

我想知道是否有一个简单的 CSS 解决方案可以从段落的结尾开始一段内容。我试过 text-align, text-align-last、text-orientation 和其他属性可能会起作用，但没有到目前为止找到任何运气。

这是我的代码片段：

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

所以它换行将最后一个跨度带到第二行。 我想要的是在最后一行将其中四个放在第一行。喜欢从结尾开始段落。

Answer 1

您可以使用 flex 和 flex-direction 来实现这一点。将 parent 元素设置为 display: flex。然后使用flex-direction: row-reverse，这将逐字颠倒父级的内容。在 flex-wrap 属性上，可以使用 wrap-reverse。很确定这就是您要找的东西。

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

另一种方法是使用显示网格。

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

如何从头到尾对齐段落中的跨度或文本

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

html

css

styles