Bagaimana untuk Mencapai Teks Jajaran Kiri pada Garis Serong dalam Semua Penyemak Imbas?

Penjajaran Teks pada Garis Serong

Latar Belakang

Mencapai teks dijajar kiri pada garis senget boleh menimbulkan cabaran, terutamanya apabila mencari penyemak imbas silang keserasian (kembali ke IE9).

Penyelesaian Menggunakan KURANG

Dengan memperkenalkan satu siri elemen segi empat sama dan mengira saiznya, kami boleh mencipta penyelesaian yang berkesan:

<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

Dalam HTML, kami menggabungkan unsur-unsur ini seperti berikut:

<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>

Kesimpulan

Penyelesaian berasaskan KURANG ini menyediakan pendekatan serasi silang pelayar untuk mencapai penjajaran kiri teks pada garis senget.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Teks Jajaran Kiri pada Garis Serong dalam Semua Penyemak Imbas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!