Kann Text in IE9 an einer schrägen Linie ausgerichtet werden?

Text an schrägen Linien ausrichten

Frage:

Ist es möglich, Text an schrägen Linien auszurichten? links auf einer schrägen Linie, um Kompatibilität mit IE9 und höher sicherzustellen?

Überlegungen:

• Die Ausrichtung muss dem Winkel der schrägen Linie folgen.

Beispielcode:

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}

<div>
  <img src="http://placehold.it/150x250&amp;text=img" alt="image" />
  <p>Lorem ipsum dolor sit amet...</p>
</div>

Antwort:

LESS verwenden

Um Browsereinschränkungen zu umgehen, verwendet eine maßgeschneiderte Lösung LESS:

<code class="less">.loop(@i) when (@i > 0) {
  .loop((@i - 1));
  .space@{i} {
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}
@hSize: 15px;
.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}</code>

HTML:

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet...
</p></code>

Proof of Concept:

Die funktionierende Lösung finden Sie unter: https://codepen.io/Tymek/pen/jEypOX?editors=110

Das obige ist der detaillierte Inhalt vonKann Text in IE9 an einer schrägen Linie ausgerichtet werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!