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

Question

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

这是我的代码 sn-p：

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