모든 브라우저에서 기울어진 선의 왼쪽 정렬 텍스트를 얻는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

모든 브라우저에서 기울어진 선의 왼쪽 정렬 텍스트를 얻는 방법은 무엇입니까?

Barbara Streisand

풀어 주다： 2024-11-01 06:44:31

원래의

863명이 탐색했습니다.

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

사선의 텍스트 정렬

배경

사선의 텍스트를 왼쪽 정렬하는 것은 특히 크로스 브라우저를 찾을 때 어려울 수 있습니다. 호환성(IE9로 돌아가기).

사용하는 솔루션 적게

일련의 정사각형 요소를 도입하고 크기를 계산함으로써 효과적인 솔루션을 만들 수 있습니다.

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

로그인 후 복사