Text-align text 45 degrees [duplicate]

问题

I would like to achieve text-alignment effect like on the screen above. Any suggestions?

回答1:

I believe you are looking for the shape-outside property.

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.

This allows for values such as:

circle(): for making circular shapes.
ellipse(): for making elliptical shapes.
inset(): for making rectangular shapes.
polygon(): for creating any shape with more than 3 vertices.
url(): identifies which image should be used to wrap text around.
initial: the float area is unaffected.
inherit: inherits shape-outside value from parent.

However, its current support is very weak, with only really chrome supporting it.

For more information, please see here

Small work around

Disclaimer ^{This should only be used for demo only and I do not recommend this approach in a production environment}

you may be able to use nth-child if you knew how many lines this paragraph will be, but this presumes you'll be using a set width/etc:

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>

来源：https://stackoverflow.com/questions/37137406/text-align-text-45-degrees

标签

css

css-shapes

text-align