IE9에서 텍스트를 기울어진 선으로 정렬할 수 있습니까?

비스듬한 선에 텍스트 정렬

질문:

텍스트를 정렬하는 것이 가능합니까? 기울어진 선의 왼쪽, IE9 이상과의 호환성 보장?

주의 사항:

• 사선의 각도를 따라 정렬해야 합니다.

예제 코드:

img {
  display: block;
  float: left;
  transform: rotate(-5deg);
  margin: 0 15px;
}

<div>
  <img src="http://placehold.it/150x250&amp;text=img" alt="image" />
  <p>Lorem ipsum dolor sit amet...</p>
</div>

정답:

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 dolor sit amet...
</p></code>

개념 증명:

https://codepen.io/Tymek/pen/jEypOX?editors=110에서 작업 솔루션을 확인하세요

위 내용은 IE9에서 텍스트를 기울어진 선으로 정렬할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!