沿着倾斜div的边缘对齐的未弯曲文本

Question

我正在尝试在偏斜的div中生成普通文本。我想保持沿着倾斜div的边缘对齐，如下所示：

可在此处查看该代码：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>

我无法完成上述工作，因为它仍沿着垂直边缘对齐文本。好奇，如果有其他人遇到这个或知道解决方案。感谢。

Answer 1

我自己正在为这样一个问题寻找一个好的答案，这个问题不是一个表现不佳，可怕的黑客，而是得到很好的支持。

我能找到的最接近的是Adobe在CSS3形状方面所做的努力。

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