html - 如何在 CSS 中将字符串 "Hello this is world"转换为 "world is this Hello"？

Question

如何使用 CSS 将字符串“Hello world I am Jack”反转为“Jack am I world Hello”？

例如:

Hello World ，我是 jack

我想知道如何使用 CSS 将其转换为

jack is this world 你好

Answer 1

假设每个词在不同的html元素中，你可以使用

display: flex;
flex-direction: row-reverse;
justify-content: flex-end;

.wrapper {
  display: flex;
}
.reversed {
  flex-direction: row-reverse;
  justify-content: flex-end;
}
.wrapper > * {
  margin: 0 .1em;
}

<div class="wrapper reversed">
  <span>Hello</span>
  <span>world</span>
  <span>this</span>
  <span>is</span>
  <span>jack</span>
</div>
<div class="wrapper normal">
  <span>Hello</span>
  <span>world</span>
  <span>this</span>
  <span>is</span>
  <span>jack</span>
</div>