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