alignment斜线上的文本

将文本左alignment在斜线上是否可行？ 它的alignment应该遵循倾斜的倾斜图像与IE9 +所需的支持？

我的示例代码 ：

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

警告： 形状外的财产不应该用于现场项目¹ 。 这个答案只是为了展示如何使用这个属性来达到预期的输出。

下面是一个使用shape-outside属性的示例（ 仅适用于现代webkit浏览器 ）：

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> 

Answer 2

使用LESS

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

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

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> 

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

@ chipChocolate.py ，这对我来说只是一个原则问题，而不是为此使用JavaScript。 如果有人想根据我的解决scheme编写JS / jQuery代码，欢迎您。 请在此分享。

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

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

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

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