Bagaimanakah Saya Boleh Menjajarkan Teks Sepanjang Garis Serong Menggunakan CSS?

Jajarkan Teks pada Garis Serong dengan Jajaran Teks Menegak

Mencapai penjajaran kiri untuk teks sepanjang garis senget boleh mencabar. Walau bagaimanapun, teknik CSS boleh menyediakan penyelesaian yang menyokong Internet Explorer 9 dan yang lebih baru.

Pendekatan CSS dengan Transformasi dan Putaran Negatif

Satu kaedah ialah menggunakan sifat transformasi dengan sudut putaran negatif. Pendekatan ini melibatkan memusingkan elemen imej dan melaraskan jidarnya untuk mencapai penjajaran yang diingini.

Pelaksanaan HTML dan CSS:

<code class="html"><div>
  <img src="image.png" style="display: block; float: left; transform: rotate(-5deg); margin: 0 15px;">
  <p>Lorem ipsum dolor sit amet...</p>
</div></code>

<code class="css">p {
  transform: rotate(5deg);
}</code>

KURANG Penyelesaian dengan Saiz Elemen Dikira

Pendekatan lain melibatkan penggunaan KURANG untuk mencipta satu siri elemen segi empat tepat yang menyerupai garis senget. Lebar setiap elemen dikira berdasarkan tangen sudut condong.

KURANG Kod:

<code class="less">@hSize: 15px;

.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

.loop(@i) when (@i > 0) {
  .loop((@i - 1));
  .space@{i} {
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}</code>

Pelaksanaan HTML:

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum dolor sit amet...
</p></code>

Walaupun penyelesaian KURANG adalah lebih kompleks, ia memberikan penjajaran yang lebih tepat, terutamanya untuk petikan teks yang lebih panjang. Kedua-dua pendekatan menawarkan penyelesaian yang berdaya maju untuk menjajarkan teks pada garis senget, dengan pilihan bergantung pada tahap ketepatan dan keperluan keserasian yang dikehendaki.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Teks Sepanjang Garis Serong Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!