CSS를 사용하여 HTML 테이블에서 텍스트를 수직으로 회전하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

How to Rotate Text Vertically in HTML Tables Using CSS?

HTML 테이블의 세로 텍스트

많은 HTML 테이블 셀에는 상당한 공간을 차지하는 제목이 포함되어 있습니다. 공간을 절약하기 위해 텍스트를 수직으로 회전하는 것을 고려할 수 있습니다. 이를 달성하기 위한 휴대용 솔루션은 다음과 같습니다.

CSS 변환 방법

이 방법은 CSS 변환을 활용하여 텍스트를 회전합니다. 다양한 브라우저를 지원하고 크로스 플랫폼 솔루션을 제공합니다. CSS 코드는 다음과 같습니다.

<code class="css">.box_rotate {
  -moz-transform: rotate(7.5deg); /* Firefox 3.5+ */
  -o-transform: rotate(7.5deg); /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg); /* Safari 3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6, IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}</code>

로그인 후 복사

HTML 사용법

회전을 사용하려면 텍스트를

요소를 선택하고 CSS 클래스 .box_rotate를 적용합니다. 예는 다음과 같습니다.

<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천：php.cn

이전 기사：CSS 변환 배율을 사용하여 올바른 jQuery 끌기/크기 조정 동작을 달성하는 방법은 무엇입니까? 다음 기사：CSS 선택기를 사용하여 ID에 특정 텍스트가 포함되고 특정 문자열로 끝나는 요소를 타겟팅하려면 어떻게 해야 합니까?

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

저자별 최신 기사