Rumah > hujung hadapan web > tutorial css > Bolehkah Teks Disejajarkan dengan Garis Serong dalam IE9?

Bolehkah Teks Disejajarkan dengan Garis Serong dalam IE9?

Barbara Streisand
Lepaskan: 2024-11-02 03:17:30
asal
545 orang telah melayarinya

Can Text Be Aligned to a Slanted Line in IE9 ?

Jajarkan Teks pada Garis Serong

Soalan:

Adakah ia boleh menjajarkan teks ke kiri pada garisan senget, memastikan keserasian dengan IE9 dan di atas?

Pertimbangan:

  • Jajaran mesti mengikut sudut garisan senget.

Contoh Kod:

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}

<div>
  <img src="http://placehold.it/150x250&amp;text=img" alt="image" />
  <p>Lorem ipsum dolor sit amet...</p>
</div>
Salin selepas log masuk

Jawapan:

Menggunakan KURANG

Untuk memintas pengehadan penyemak imbas, penyelesaian tersuai memanfaatkan KURANG:

<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>
Salin selepas log masuk

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>
Salin selepas log masuk

Bukti Konsep:

Lihat penyelesaian yang berkesan di: https://codepen.io/Tymek/pen/jEypOX?editors=110

Atas ialah kandungan terperinci Bolehkah Teks Disejajarkan dengan Garis Serong dalam IE9?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan