html - 控制 CSS 镜像文本的位置

Question

使用这个问题的答案中的代码，我设法镜像文本，但现在它超出了正常文本的流程。

<style>
span.flip {
        display: block;
        -moz-transform: scaleX(-1); /* Gecko */
        -o-transform: scaleX(-1); /* Operah */
        -webkit-transform: scaleX(-1); /* webkit */
        transform: scaleX(-1); /* standard */
        filter: FlipH; /* IE 6/7/8 */
    }
</style>

<p>Some text <span class="flip">mirror</span> and more tex</p>

如何防止镜像文本脱离正常文本流？哪些属性控制镜像文本的位置？

Answer 1

添加display: inline-block;这将使其全部在一行中：

<style>
span.flip {
        display: inline-block;
        -moz-transform: scaleX(-1); /* Gecko */
        -o-transform: scaleX(-1); /* Operah */
        -webkit-transform: scaleX(-1); /* webkit */
        transform: scaleX(-1); /* standard */
        filter: FlipH; /* IE 6/7/8 */
    }
</style>

<p>Some text <span class="flip">mirror</span> and more text</p>​

如果您希望它在不同的行上，请使用以下命令：

<style>
span.flip {
        display: block;
        -moz-transform: scaleX(-1); /* Gecko */
        -o-transform: scaleX(-1); /* Operah */
        -webkit-transform: scaleX(-1); /* webkit */
        transform: scaleX(-1); /* standard */
        filter: FlipH; /* IE 6/7/8 */
        width: 36px; 
    }
</style>

<p>Some text <span class="flip">mirror</span> and more text</p>​