css – 文本对齐文本45度

参见英文答案 > Align text on slanted line                                    4个
Screen

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

我相信你正在寻找外形的房产.

The shape-outside CSS property uses shape values to define the float area for a float and will cause inline content to wrap around the shape instead of the float’s bounding box.

这允许以下值:

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

然而,它的current support非常弱,只有真正的铬支持它.

有关更多信息,请参阅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>
相关文章
相关标签/搜索