控制CSS鏡像文本的位置

Question

使用this答案中的代碼問題我設法鏡像文本，但現在它已超出正常文本的流程。

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