如何將文字向左旋轉90 度並根據HTML 中的文字調整儲存格大小
使用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>以下是它的工作原理:
利用CSS書寫模式的能力，我們可以根據文字的長度動態調整單元格大小，確保文字正確旋轉而不影響桌子的佈局。此方法對於列內文字長度變化較大的場景特別有用。
以上是如何將表格儲存格中的文字向左旋轉 90 度並根據文字長度調整儲存格大小？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
