정렬을 엉망으로 만들지 않고 HTML 테이블에서 텍스트를 90도 회전하는 방법은 무엇입니까?

HTML 및 CSS를 사용하여 조정된 셀 크기로 텍스트를 왼쪽으로 90도 회전

HTML에서 셀 정렬을 엉망으로 만드는 회전된 텍스트 문제를 해결하려면 테이블에서는 보다 정확한 접근 방식이 필요합니다. 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>

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

쓰기 모드를 적용하여 속성을 회전된 텍스트 요소에 적용하면 텍스트가 회전된 요소의 축에 수직으로 흐르도록 강제합니다. 이렇게 하면 올바른 정렬이 보장되고 텍스트가 인접한 셀로 넘치는 것을 방지할 수 있습니다.

특히 Chrome은 해당 요소에 대한 쓰기 모드 속성을 지원하지 않습니다. 이 문제를 해결하기 위해 텍스트를 범위 요소로 래핑하고 -webkit-writing-mode 속성을 적용하여 브라우저 간 호환성을 보장합니다.

위 내용은 정렬을 엉망으로 만들지 않고 HTML 테이블에서 텍스트를 90도 회전하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!