Heim  >  Artikel  >  Web-Frontend  >  Wie kann ich in IE9 Text entlang einer schrägen Linie linksbündig ausrichten?

Wie kann ich in IE9 Text entlang einer schrägen Linie linksbündig ausrichten?

Patricia Arquette
Patricia ArquetteOriginal
2024-11-02 08:41:02754Durchsuche

How can I left-align text along a slanted line in IE9 ?

Text an einer schrägen Linie ausrichten

Frage:

Kann Text beim Verfolgen linksbündig an einer schrägen Linie ausgerichtet werden? der Winkel des schrägen Bildes und die Unterstützung von IE9 ?

Lösung:

LESS verwenden:

Um die gewünschte Ausrichtung zu erreichen , können Sie zusätzliche quadratische Elemente hinzufügen und deren Größe mit LESS berechnen:

<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 ...
</p></code>

Proof of Concept:

http://codepen.io/Tymek/pen/jEypOX?editors=110

Das obige ist der detaillierte Inhalt vonWie kann ich in IE9 Text entlang einer schrägen Linie linksbündig ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn