首頁 > web前端 > css教學 > 如何在 IE9 中沿斜線左對齊文字?

如何在 IE9 中沿斜線左對齊文字?

Patricia Arquette
發布: 2024-11-02 08:41:02
原創
846 人瀏覽過

How can I left-align text along a slanted line in IE9 ?

在斜線上對齊文字

問題:

跟隨左時文字可以沿斜線對齊影像的角度和支持IE9嗎?

解決方案:

使用LESS:

實現所需的對齊,您可以添加額外的方形元素並使用LESS 計算其大小:

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

<code class="html"><p>
  <span class="space space1"></span>
  <span class="space space2"></span>
  <!-- (...) -->
  <span class="space space11"></span>
  Lorem ipsum ...
</p></code>
登入後複製

概念證明:

http:/ /codepen.io/Tymek/pen/jEypOX?editors=110

以上是如何在 IE9 中沿斜線左對齊文字?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板