2014-04-08 2 views
2

기울어 진 div 내에 일반 텍스트를 생성하려고합니다. 그 코드는 여기에서 볼 수 있습니다기울어 진 div의 가장자리를 따라 정렬되지 않은 텍스트

skewed_perspective

:이 같은 왜곡 된 사업부의 가장자리를 따라 정렬을 유지하려는 http://jsfiddle.net/WU8gT/8/

그것은 꽤 아니다; 각 요소는 부동 스팬에 래핑됩니다.

<div class="section_header twist_right"> 
    <span class="float twist_left">The&nbsp;</span> 
    <span class="float twist_left">Quick&nbsp;</span> 
    <span class="float twist_left">Brown&nbsp;</span> 
    <span class="float twist_left">Fox&nbsp;</span> 
    <span class="float twist_left">Jumped&nbsp;</span> 
    <span class="float twist_left">Over&nbsp;</span> 
    <span class="float twist_left">The&nbsp;</span> 
    <span class="float twist_left">Lazy&nbsp;</span> 
    <span class="float twist_left">Dog&nbsp;</span> 
</div> 

하나의 텍스트 래퍼에서이 기능을 구현할 수있는 방법이 있습니까? 예를 들면 :

<div class="section_header twist_right"> 
    <p class="twist_left"> The quick brown fox jumped over the lazy dog</p> 
</div> 

나는 여전히 수직 가장자리를 따라 텍스트를 정렬로 일할 위를 얻을 수 없었다. 누군가 다른 사람이이 문제에 직면했거나 해결책을 알고 있는지 궁금합니다. 감사.

답변

0

저는 성능 호그가 아니며, 끔찍한 해키하고, 잘 지원되는 그러한 질문에 대해 좋은 답변을 찾고 있습니다.

어도비의 CSS3 모양 노력이 가장 근접한 것으로 나타났습니다.

http://html.adobe.com/webplatform/layout/shapes/

관련 문제