在斜线上对齐文本

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实际上（mai 2016）具有“候选推荐”的状态。因为这意味着它正在进行中，它可能随时发生变化，因此不应用于测试之外。}

使用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。