在斜线上对齐文本

Question

是否可以使文本在斜线上左对齐？它的对齐方式应该遵循倾斜的倾斜图像并需要对 IE9+ 的支持？

我的例子code：

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}

<div>
  <img src="http://placehold.it/150x250&text=img" alt="image" />
  <p>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>
</div>

Answer 1

使用 LESS

你们让我想得更多，所以我想出了自己的丑陋解决方案。 我的想法是添加一堆额外的方形元素并计算其大小：

.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：

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

概念证明：http://codepen.io/Tymek/pen/jEypOX?editors=110

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

Answer 2

警告： shape-outside 属性不应在实际项目中使用¹。这个答案只是为了展示所需的输出如何 用这个属性来实现。

这是一个使用 shape-outside 属性 (modern webkit browsers only) 的示例：

DEMO

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 20px;
  -webkit-shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
  shape-outside: polygon(0 3%, 85% -3%, 100% 97%, 15% 103%);
}

<div>
  <img src="http://placehold.it/150x250&text=img" alt="image" />
  <p>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>
</div>

¹_{CSS Shapes Module Level 1 实际上（2016 年 5 月）的状态为“候选人推荐”。由于这意味着它是一项正在进行的工作，它可能随时更改，因此不应用于测试以外的其他用途。}

使用shape-inside property 可以实现相同的布局，并为文本指定一个包含框，但我所知道的目前没有浏览器支持此属性。

---

有关跨浏览器方法，请参阅Tymek's answer。

Answer 3

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}
p {
  transform: skew(6deg);
  font-style: italic;
}

<div>
  <img src="http://placehold.it/150x250&text=img" alt="image" />
  <p>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>
</div>

Answer 4

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

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

有了这些信息，您可以添加一个根据图像位置和尺寸计算得出的padding-left。