CSS 변환을 사용하여 HTML 테이블 셀의 텍스트를 회전하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS 변환을 사용하여 HTML 테이블 셀의 텍스트를 회전하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-10-28 08:01:29

원래의

907명이 탐색했습니다.

How to Rotate Text in HTML Table Cells Using CSS Transforms?

HTML 표 셀에서 텍스트 회전

HTML 표는 표 형식의 데이터를 구성하고 표시하는 데 널리 사용되므로, HTML 표 셀 내에서 텍스트를 회전하는 기능은 셀은 공간이 제한된 상황, 특히 긴 제목의 경우 유용할 수 있습니다.

CSS 변환 활용

HTML 테이블에서 텍스트를 회전하는 강력하고 이식 가능한 솔루션은 CSS를 사용하는 것입니다. 변환합니다. CSS3 변환 속성을 사용하면 셀의 레이아웃이나 기능을 손상시키지 않고 90도 회전을 달성할 수 있습니다. 다음 CSS 코드는 텍스트를 7.5도 회전하는 방법을 보여줍니다.

<code class="css">.box_rotate {
    -moz-transform: rotate(7.5deg);
    -o-transform: rotate(7.5deg);
    -webkit-transform: rotate(7.5deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
}</code>

로그인 후 복사

구현 예

구현을 설명하려면 다음 HTML 코드를 고려하세요.

<code class="html"><div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div class="box_rotate">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae porta lectus. Suspendisse dolor mauris, scelerisque ut diam vitae, dictum ultricies est. Cras sit amet erat porttitor arcu lacinia ultricies. Morbi sodales, nisl vitae imperdiet consequat, purus nunc maximus nulla, et pharetra dolor ex non dolor.</div></code>

로그인 후 복사

이 예에서는 box_rotate 클래스가 두 번째

에 적용되어 텍스트를 7.5도 회전합니다. 결과적으로 해당 특정 셀의 텍스트가 수직으로 렌더링되어 표 열 내에서 수직으로 정렬됩니다.

위 내용은 CSS 변환을 사용하여 HTML 테이블 셀의 텍스트를 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!