HTML 테이블에서 텍스트를 수직으로 회전하려면 어떻게 해야 합니까?-CSS 튜토리얼-php.cn

HTML 테이블에서 텍스트를 수직으로 회전하려면 어떻게 해야 합니까?

Mary-Kate Olsen

풀어 주다： 2024-11-02 00:23:02

원래의

491명이 탐색했습니다.

How can I rotate text vertically in an HTML table?

HTML 테이블의 세로 텍스트

HTML 테이블 셀 내에서 텍스트를 세로로 회전하는 것은 밀집된 테이블의 공간을 최적화하기 위한 일반적인 쿼리입니다. 이 효과를 얻기 위해 널리 사용되는 접근 방식은 변환 속성을 활용하여 CSS 스타일을 정의하는 것입니다.

한 가지 방법은 CSS 회전 속성을 사용하는 것입니다.

.box_rotate {
  -moz-transform: rotate(7.5deg);  /* FF3.5+ */
  -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

로그인 후 복사

이 스타일을 테이블에 적용 셀 안의 텍스트가 시계 반대 방향으로 7.5도 회전합니다.

<code class="html"><td>
  <div class="box_rotate">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  </div>
</td></code>

로그인 후 복사

이 기술을 사용하면 텍스트를 수직으로 변환하여 광범위한 제목이나 텍스트가 있는 테이블의 공간을 효과적으로 절약할 수 있습니다.

위 내용은 HTML 테이블에서 텍스트를 수직으로 회전하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!