HTML에서 텍스트를 왼쪽으로 90도 회전하고 이에 따라 셀 크기를 조정하는 방법은 무엇입니까?

HTML의 텍스트에 따라 텍스트를 왼쪽으로 90도 회전하고 셀 크기를 조정하는 방법

원하는 회전 효과를 얻으면서도 동시에 그에 따라 셀 크기를 조정하려면 CSS와 HTML의 조합을 사용하는 것이 좋습니다.

CSS 솔루션:

<code class="css">th {
  vertical-align: bottom;
  text-align: center;
}

th span {
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
}</code>

HTML 솔루션:< /h3>

<code class="html"><table>
  <tr>
    <th><span>Rotated text by 90 deg.</span></th>
  </tr>
</table></code>

로그인 후 복사

이 솔루션에서는:

• th { 수직 정렬: 하단; 텍스트 정렬: 가운데; }: 회전된 텍스트를 셀 내에서 수직 및 수평으로 정렬합니다.
• thspan { ...writing-mode: Vertical-rl; }: 텍스트의 쓰기 모드를 세로로 설정하여 세로로 회전할 수 있도록 합니다.
• thspan { 변환: 회전(180deg); }: 왼쪽을 향하도록 텍스트를 180도 회전합니다.
• 번째 범위 { 공백: nowrap; }: 텍스트 줄 바꿈을 방지하여 한 줄에 모두 맞도록 하고 이에 따라 셀 크기를 조정합니다.

참고:

이 솔루션을 사용하려면 회전된 텍스트를 요소. <스팬> 요소는 의 텍스트 방향 변경을 기본적으로 지원하지 않기 때문에 Chrome에만 필요합니다. 요소.

위 내용은 HTML에서 텍스트를 왼쪽으로 90도 회전하고 이에 따라 셀 크기를 조정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!