文本对齐文本 45 度 [重复]答案

【问题标题】：Text-align text 45 degrees [duplicate]文本对齐文本 45 度 [重复]
【发布时间】：2016-05-10 20:05:53
【问题描述】：

我想实现上面屏幕上的文本对齐效果。有什么建议吗？

【问题讨论】：

这不是关于文本对齐，而是一个带有 png 背景的 div。无论如何，您尝试过什么？在这里阅读：stackoverflow.com/help/how-to-ask
这应该作为题外话关闭。自己尝试一些事情并针对特定问题提出特定问题
我已将屏幕更改为更具体
阅读@MattiaNocerino 评论，点击该链接，然后阅读！
有什么建议吗？ – 是的，看看CSS-Shapes

标签： css css-shapes text-align

【解决方案1】：

我相信您正在寻找shape-outside 属性。

shape-outside CSS 属性使用形状值来定义浮动的浮动区域，并将导致内联内容环绕形状而不是浮动的边界框。

这允许以下值：

circle()：用于制作圆形。
ellipse()：用于制作椭圆形状。
inset()：用于制作矩形。
polygon()：用于创建任何超过 3 个顶点的形状。
url()：确定应该使用哪个图像来环绕文本。
初始：浮动区域不受影响。
inherit：从父级继承 shape-outside 值。

然而，它的current support非常弱，只有真正的chrome支持它。

更多信息请见here

小型解决方案

免责声明 ^{这应该只用于演示，我不推荐在生产环境中使用这种方法}

你可以使用 nth-child 如果你知道这一段会有多少行，但这假设你将使用一个设置的宽度/等：

div {
  background: tomato;
  width: 500px;
  display: inline-block;
  height: 300px;
}
div span {
  display: block;
}
div span:nth-child(1) {margin-left: 0px;}
div span:nth-child(2) {margin-left: 10px;}
div span:nth-child(3) {margin-left: 20px;}
div span:nth-child(4) {margin-left: 30px;}
div span:nth-child(5) {margin-left: 40px;}
div span:nth-child(6) {margin-left: 50px;}
div span:nth-child(7) {margin-left: 60px;}
div span:nth-child(8) {margin-left: 70px;}
div span:nth-child(9) {margin-left: 80px;}
div span:nth-child(10) {margin-left: 90px;}

<div>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
  <span>Some nice long text</span>
</div>

【讨论】：

谢谢人：）这就是我要找的。可惜浏览器支持太弱了：）
@ŁukaszRo 如果你 100% 准备好这样做，你也许可以用 nth-child 做点什么，但在 IMO 看来，这太骇人听闻了。