Heim > Web-Frontend > CSS-Tutorial > Kann Text in IE9 linksbündig entlang einer schrägen Linie ausgerichtet werden?

Kann Text in IE9 linksbündig entlang einer schrägen Linie ausgerichtet werden?

Mary-Kate Olsen
Freigeben: 2024-11-01 17:58:02
Original
391 Leute haben es durchsucht

 Can text be left-aligned along a slanted line in IE9 ?

Text an schräger Linie ausrichten

Kann Text entlang einer schrägen Linie linksbündig ausgerichtet werden? Die Ausrichtung sollte der schrägen Form entsprechen, kompatibel mit IE9-Browsern.

Betrachten Sie dieses Codebeispiel:

<code class="html"><img src="http://placehold.it/150x250&text=img" alt="image" />
<p>Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu,luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.</p></code>
Nach dem Login kopieren
<code class="css">img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}</code>
Nach dem Login kopieren

Lösung: Verwendung von LESS

Als Ergänzung zum Standard-CSS-Ansatz besteht eine unkonventionellere Lösung darin, quadratische Elemente hinzuzufügen und deren Größe zu 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

Mit HTML wie folgt:

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, paragraph.
</p></code>
Nach dem Login kopieren

Hier ist ein Live-Beispiel, um die Lösung in Aktion zu demonstrieren: http://codepen.io/Tymek/pen/jEypOX?editors=110

Das obige ist der detaillierte Inhalt vonKann Text in IE9 linksbündig entlang einer schrägen Linie ausgerichtet werden?. 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