2

この質問への回答からのコードを使用して、私はなんとかテキストをミラーリングすることができましたが、今では通常のテキストの流れから外れています。

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

ミラーリングされたテキストが通常のテキストフローから抜け出さないようにするにはどうすればよいですか？ミラーリングされたテキストの位置を制御するプロパティはどれですか？

4

1 に答える 1

1

これを追加display: inline-block;すると、すべてが1行になります。

<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>​
于 2012-05-06T14:14:20.297 に答える