在斜线上对齐文本

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

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 2

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

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

根据此信息，您可以添加 padding-left 根据图像位置和尺寸计算得出的值。

Answer 3

WARNING: The shape-outside property should not be used in live projects¹. This answer is here just to show how the desired output can be achieved with this property.

这是一个使用 shape-outside property (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）的状态是"Candidate Recommendation"。因为这意味着它是一项正在进行的工作，它可能随时更改，因此除了测试之外不应使用。}

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

有关跨浏览器的方法，请参阅。

Answer 4

少用

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

.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 代码，不客气。之后请在这里分享。

在斜线上对齐文本

Align text on slanted line

css

css-shapes

少用

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