Css 在斜线上对齐文本

可以使文本在斜线上左对齐吗？它的对齐应该遵循倾斜图像，并提供IE9+所需的支持

我的例子是：

img{
显示：块；
浮动：左；
变换：旋转（-5度）；
利润率：0.15px；
}

Lorem ipsum dolor sit amet。蜗壳式公共前庭a、convallis ac、laoreet enim。多洛，多洛。佩伦特式便利。纳拉·艾米特·麦格纳。大前庭、大前庭、大前庭、大前庭、大前庭、大前庭。等分法。整数等号purus。前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图

img{
显示：块；
浮动：左；
变换：旋转（-5度）；
利润率：0.15px；
}
p{
变换：倾斜（6度）；
字体：斜体；
}

Lorem ipsum dolor sit amet。蜗壳式公共前庭a、convallis ac、laoreet enim。多洛，多洛。佩伦特式便利。纳拉·艾米特·麦格纳。dapibus前庭，mauris nec malesuada著名的ac turpis velit，rhoncus eu，
这是我的愿望。等分法。整数等号purus。前庭id为tortor fringilla sed，前庭id为eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non，前庭id为lobortis quis，前庭id为varius in，
段落

我不能给你一个代码示例，这比倾斜变换更复杂

您必须解析文本及其包含的相关DOM，并查找每一行新文本（不是br或\n，而是每一渲染行的第一个字符）

有了这些信息，您可以添加一个从图像位置和尺寸计算出来的左填充

警告：不应在实时项目1中使用shape outside属性。这里的答案只是为了说明如何实现所需的输出 可以用这个属性来实现

下面是一个使用属性（）的示例：

img{
显示：块；
浮动：左；
变换：旋转（-5度）；
利润率：0.20px；
-webkit外部形状：多边形（03%，85%-3%，100%97%，15%103%）；
外形：多边形（03%，85%-3%，100%97%，15%103%）；
}

Lorem ipsum dolor sit amet。蜗壳式公共前庭a、convallis ac、laoreet enim。多洛，多洛。佩伦特式便利。纳拉·艾米特·麦格纳。dapibus前庭，mauris nec malesuada著名的ac turpis velit，rhoncus eu，
这是我的愿望。等分法。整数等号purus。前庭id为tortor fringilla sed，前庭id为eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non，前庭id为lobortis quis，前庭id为varius in，
段落

使用更少的资源 你们让我想得有点离经叛道，所以我拿出了自己丑陋的解决方案。 我的想法是添加一堆额外的正方形元素并计算其大小：

.loop(@i) when (@i > 0){
  .loop((@i - 1));
  .space@{i}{
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

HTML:

Lorem ipsum dolor sit amet。蜗壳式公共前庭a、convallis ac、laoreet enim。多洛，多洛。佩伦特式便利。纳拉·艾米特·麦格纳。大前庭、大前庭、大前庭、大前庭、大前庭、大前庭。等分法。整数等号purus。前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图，前庭id图。

概念证明：

---

@chipChocolate.py，对于我来说，不使用JavaScript只是一个原则问题。如果有人想基于我的解决方案编写JS/jQuery代码，欢迎您。请稍后在这里分享。

这里很好地解释了如何在CSS（）中实现这一点。虽然这看起来很有说服力，显然，文本的右边缘也是歪斜的，但不可靠，因为它只适用于小于5或7的角度值，文本将永远不会看起来正常。这不像其他示例那样紧靠图像的右侧。请注意，目前CSS3形状规范是一项正在进行的工作，未得到W3C的认可。@SalmanA由于这个答案越来越高，我确实觉得应该明确指定它不应该使用。请参阅其他示例，其中文本的左边缘实际上有一个与图像的右边缘匹配的倾斜。在你的情况下，你只留下一个没有倾斜的文本。啊，似乎我比最小值低了一个版本。很抱歉。我甚至没有意识到我的chrome已经有一段时间没有更新了。好奇你是否有一个版本也会有负度数（遮罩会从大变小）？尝试在HTML中反转

顺序，或者将计算更改为

宽度：地板（@hSize-@I*@hSize/（1/tan（5deg））。这是懒惰的版本-我不想再检查三角函数了。
<p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p>