旋轉CSS元素時如何準確保持父級高度？

CSS 中的旋轉元素：準確影響父級高度

在本文中，我們將探討在不扭曲其父級高度的情況下旋轉列內某些元素的挑戰。讓我們考慮一個有四列的範例，我們想要旋轉其中一列中的值，如下所示：

<div class="container">
    <div class="statusColumn"><span>Normal</span></div>
    <div class="statusColumn"><a>Normal</a></div>
    <div class="statusColumn"><b>Rotated</b></div>
    <div class="statusColumn"><abbr>Normal</abbr></div>
</div>

使用以下CSS：

.statusColumn b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

這會產生一個與其他元素重疊的旋轉元素列：

目標：實現旋轉元素的大小仍然會影響其父級高度的結果，從而防止文字重疊：

解：

解：

.statusColumn {
  position: relative;
  border: 1px solid #ccc;
  padding: 2px;
  margin: 2px;
  width: 200px;
}

.statusColumn i,
.statusColumn b,
.statusColumn em,
.statusColumn strong {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
}

正如G-Cyr 所指出的，現代瀏覽器為寫入模式提供了良好的支援。透過將writing-mode與簡單的旋轉結合，我們可以達到預期的結果：這段程式碼將旋轉元素的書寫模式設定為“vertical-rl”，確保旋轉後文字垂直流動180 度。它還可以實現正確換行並避免文字重疊。

以上是旋轉CSS元素時如何準確保持父級高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！