CSS를 사용하여 기울어진 선을 따라 텍스트를 정렬하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

CSS를 사용하여 기울어진 선을 따라 텍스트를 정렬하려면 어떻게 해야 합니까?

Linda Hamilton

풀어 주다： 2024-10-31 19:42:30

원래의

1084명이 탐색했습니다.

How Can I Align Text Along a Slanted Line Using CSS?

세로 텍스트 정렬을 사용하여 기울어진 선의 텍스트 정렬

비스듬한 선을 따라 텍스트를 왼쪽 정렬하는 것이 어려울 수 있습니다. 그러나 CSS 기술은 Internet Explorer 9 이상을 지원하는 솔루션을 제공할 수 있습니다.

변환 및 음의 회전을 사용한 CSS 접근 방식

한 가지 방법은 다음과 같은 변환 속성을 활용하는 것입니다. 음의 회전 각도. 이 접근 방식에는 원하는 정렬을 얻기 위해 이미지 요소를 회전하고 여백을 조정하는 작업이 포함됩니다.

HTML 및 CSS 구현:

<code class="html"><div>
  <img src="image.png" style="display: block; float: left; transform: rotate(-5deg); margin: 0 15px;">
  <p>Lorem ipsum dolor sit amet...</p>
</div></code>

로그인 후 복사

<code class="css">p {
  transform: rotate(5deg);
}</code>

로그인 후 복사

LESS 계산된 요소 크기를 사용한 솔루션

또 다른 접근 방식은 LESS를 사용하여 기울어진 선을 시뮬레이션하는 일련의 직사각형 요소를 만드는 것입니다. 각 요소의 너비는 경사각의 탄젠트를 기준으로 계산됩니다.

LESS 코드:

<code class="less">@hSize: 15px;

.space {
  float: left;
  clear: left;
  width: @hSize;
  height: @hSize;
}

.loop(@i) when (@i > 0) {
  .loop((@i - 1));
  .space@{i} {
    width: floor(@i*@hSize/(1/tan(5deg)));
  }
}</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>

로그인 후 복사

LESS 솔루션은 더 복잡하지만 특히 긴 텍스트 구절의 경우 더 정확한 정렬을 제공합니다. 두 접근 방식 모두 원하는 수준의 정밀도와 호환성 요구 사항에 따라 선택하여 기울어진 선에 텍스트를 정렬하는 실행 가능한 솔루션을 제공합니다.

위 내용은 CSS를 사용하여 기울어진 선을 따라 텍스트를 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!