세로 텍스트 정렬을 사용하여 기울어진 선의 텍스트 정렬
비스듬한 선을 따라 텍스트를 왼쪽 정렬하는 것이 어려울 수 있습니다. 그러나 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!