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

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>

所以它包装了将最后一个跨度带到第二行的跨度。我想要的是在最后一行有四个，将包装一个到第一行。就像从结尾开始段落一样。

标签： htmlcssstyles

Answer 1

您可以使用flexwithflex-direction来实现这一点。将您的父元素设置为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>