Question

我怎样才能扭转字符串＆＃34;你好世界我是杰克＆＃34; to＆＃34; Jack am I world Hello＆＃34;用CSS？

例如：

Hello world这是杰克

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

杰克就是这个世界你好

Answer 1

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

如果您能够将单个单词包装在其他元素中，例如<span>word</span>，那么可以使用direction和unicode-bidi来实现此目的：< / p>

＆＃13;

#demo {
  /* changes the direction of in-line elements/flow content to right-to-left: */
  direction: rtl;
  /* changes the calculation process by which the browser normally evaluates
     the placement of in-line elements/flow-content: */
  unicode-bidi: bidi-override;
  /* because direction: rtl makes content right-to-left, this float moves the 
     parent element back to the left of the screen (for us left-to-right readers): */
  float: left;
}

#demo > span {
  display: inline-block;
}

＆＃13;

<div id="demo">
  <span>Hello</span> <span>I</span> <span>am</span> <span>Jack</span>
</div>

＆＃13;

但是，老实说，JavaScript更清晰，可能更可靠。

参考文献：

Answer 3

您需要JavaScript来执行此操作：

var s = "Hello world i am jack";
alert(s.split(' ').reverse().join(' '));

Fiddle

如果字符串位于div：

<div>Hello world I am Jack</div>

你可以这样做：

document.getElementsByTagName('div')[0].innerHTML = document.getElementsByTagName('div')[0].innerHTML.split(' ').reverse().join(' ');

Fiddle

Answer 4

你不能在CSS中这样做，因为CSS是关于格式化HTML 元素，而且这样的单词不是HTML元素。如果将每个单词包装在元素中，则可以采用各种方法;但是如果你能做到这一点，你也可以在内容itsel

中按照所需的顺序排列

如何在CSS中将字符串“Hello this is world”转换为“world is this Hello”？

4 个答案:

Fiddle

Fiddle