html - 内联元素方向

Question

是否可以仅使用 css 更改内联元素顺序？

就像我们有这个：

<span class="opening_quote">“&lt;/span>
<span class="text">Lorem ipsum...</span>
<span class="closing_quote">”&lt;/span>

• 文本将是多行的。
• 代码应该支持 ie6+ 所以 :after 和 :before 我们不能使用。

但是对于 rtl 方向，我们应该改变引号和文本的顺序：

“Lorem ipsum dolor sit amet, consectetur 
adipiscing elit”

至

Lorem ipsum dolor sit amet, consectetur”
                        “adipiscing elit

谢谢。

Answer 1

您可以将 text-align （如已经建议的那样）.text span与更改floaton结合起来，.opening_quote以便在需要时正确浮动或将其位置更改为absolutewithright: 0;

Answer 2

您需要创建以下结构：

<span class="text">Lorem ipsum...</span>
<span class="opening_quote">“&lt;/span>
<span class="closing_quote">”&lt;/span>

并添加absolute到引号取决于方向。

Answer 3

有一个 CSSdirection属性，当应用于父元素时应该可以满足您的需求。MDN 链接

<style>
.rtl {direction:rtl;}
</style>

<p class="rtl">
<span class="opening_quote">“&lt;/span>
<span class="text">Lorem ipsum...</span>
<span class="closing_quote">”&lt;/span>
</p>

看到这个 JSFiddle