Wie erreicht man in allen Browsern linksbündigen Text auf einer schrägen Linie?

Textausrichtung auf schrägen Linien

Hintergrund

Linksbündigen Text auf einer schrägen Linie zu erreichen, kann eine Herausforderung darstellen, insbesondere bei der Suche über mehrere Browser hinweg Kompatibilität (zurück zu IE9).

Lösung mit LESS

Durch die Einführung einer Reihe quadratischer Elemente und die Berechnung ihrer Größen können wir eine effektive Lösung erstellen:

<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

In HTML integrieren wir diese Elemente 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>

Fazit

Diese LESS-basierte Lösung bietet einen browserübergreifenden kompatiblen Ansatz, um eine linksbündige Ausrichtung zu erreichen Text auf einer schrägen Linie.

Das obige ist der detaillierte Inhalt vonWie erreicht man in allen Browsern linksbündigen Text auf einer schrägen Linie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!