文本对齐文本45度

Question

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

Answer 1

我相信您正在寻找shape-outside财产。

  

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

这允许使用以下值：

• circle（）：用于制作圆形形状。
• ellipse（）：用于制作椭圆形状。
• inset（）：用于制作矩形形状。
• polygon（）：用于创建具有3个以上顶点的任何形状。
• url（）：标识应该使用哪个图像来包装文本。
• initial：浮动区域不受影响。
• inherit：从parent继承shape-outside值。

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

有关详细信息，请参阅here

小工作

免责声明 ^{这应仅用于演示，我不建议在生产环境中使用此方法}

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;