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

사선의 텍스트 정렬

배경

사선의 텍스트를 왼쪽 정렬하는 것은 특히 크로스 브라우저를 찾을 때 어려울 수 있습니다. 호환성(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>

결론

이 LESS 기반 솔루션은 기울어진 선에서 텍스트를 왼쪽 정렬하기 위한 크로스 브라우저 호환 접근 방식입니다.

위 내용은 모든 브라우저에서 기울어진 선의 왼쪽 정렬 텍스트를 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!