如何在所有浏览器中实现斜线左对齐文本？-css教程-PHP中文网

如何在所有浏览器中实现斜线左对齐文本？

Barbara Streisand

发布： 2024-11-01 06:44:31

原创

862 人浏览过

How to Achieve Left-Aligned Text on a Slanted Line in All Browsers?

斜线上的文本对齐

背景

在斜线上实现左对齐文本可能会带来挑战，特别是在寻求跨浏览器时兼容性（返回 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>

登录后复制