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

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

CSS 변환을 사용하여 텍스트 셀을 왼쪽으로 90도 회전하면 잘못된 정렬 및 잘못된 형식 지정과 같은 문제가 발생합니다. 이러한 문제를 해결하기 위해 텍스트 길이에 따라 셀 크기를 동적으로 조정하는 엄격한 CSS 및 HTML 솔루션을 구현할 수 있습니다.

HTML 코드에서는 회전하려는 텍스트를 포함하는 요소:

<code class="html"><table cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td id='rotate'><span>10kg</span></td>
        <td>B</td>
        <td>C</td>
        <td>D</td>
        <td>E</td>
    </tr>
    <tr>
        <td id='rotate'><span>20kg</span></td>
        <td>G</td>
        <td>H</td>
        <td>I</td>
        <td>J</td>
    </tr>
    <tr>
        <td id='rotate'><span>30kg</span></td>
        <td>L</td>
        <td>M</td>
        <td>N</td>
        <td>O</td>
    </tr>
</table></code>

다음으로 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>

작동 방식은 다음과 같습니다. :

• 번째 규칙은 셀의 세로 정렬을 아래쪽으로, 텍스트 정렬을 가운데로 설정합니다.
• 번째 범위 규칙은 텍스트에 세로 쓰기 모드를 적용하고, 뒤집습니다. 180도 회전하여 줄 바꿈을 방지합니다.

CSS 쓰기 모드의 기능을 활용하면 텍스트 길이에 따라 셀 크기를 동적으로 조정할 수 있으므로 텍스트가 손상되지 않고 올바르게 회전되도록 할 수 있습니다. 테이블의 레이아웃. 이 방법은 열 내에서 텍스트 길이가 크게 달라지는 시나리오에 특히 유용합니다.

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