Text-align text 45 degrees

Question

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

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