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

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>

<code class="css">img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}</code>

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>

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>

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!