Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-11-02 08:41:02
Original
766 Leute haben es durchsucht

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>
Nach dem Login kopieren

HTML:

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum ...
</p></code>
Nach dem Login kopieren

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!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!