CSS를 사용하여 HTML 테이블에서 텍스트를 수직으로 회전하는 방법은 무엇입니까?
- DDD원래의
- 2024-10-27 08:26:03721검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 변환 배율을 사용하여 올바른 jQuery 끌기/크기 조정 동작을 달성하는 방법은 무엇입니까?다음 기사：CSS 변환 배율을 사용하여 올바른 jQuery 끌기/크기 조정 동작을 달성하는 방법은 무엇입니까?
관련 기사
더보기- 다음은 간결하고 매력적이어야 한다는 점을 염두에 두고 몇 가지 제목 옵션입니다. 직접적이고 유익한 정보: * 양식 요소 너비를 넘어 Bootstrap 3 팝오버를 확장하는 방법은 무엇입니까? * 부트스트랩 Popove 만들기
- Bootstrap 클래스 \"mb-0\"은 요소의 여백에 어떤 영향을 미치나요?
- 웹 디자인에서 고정 너비 Div와 남은 공간 Div를 수용하는 방법은 무엇입니까?
- 다음은 질문 형식을 활용한 몇 가지 제목 옵션입니다. * WAR 파일 없이 HTML 및 CSS 파일을 Tomcat에 배포할 수 있습니까? (직접적이고 명시적) * Tomcat에 HTML 및 CSS 웹페이지를 배포하는 방법:
- 크기가 조정된 CSS 요소 주위의 공백을 제거하는 방법은 무엇입니까?