すべてのブラウザで斜めの線で左揃えのテキストを実現するにはどうすればよいですか?

斜めの線でのテキストの配置

背景

斜めの線でテキストを左揃えにすることは、特にクロスブラウザーを求める場合に課題となる可能性があります。互換性 (IE9 に戻る)。

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

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

結論

この LESS ベースのソリューションは、左揃えを実現するためのブラウザ間互換性のあるアプローチを提供します。斜線のテキスト。

以上がすべてのブラウザで斜めの線で左揃えのテキストを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。