回転されたインライン要素が CSS の親の高さに影響を与えないようにするにはどうすればよいですか?

CSS の親の高さに影響する回転要素

インライン要素に回転を適用する場合、親の高さに悪影響が及ばないようにすることが重要です。テキストを含む複数の列があり、いくつかを回転したいというシナリオを考えてみましょう。

例:

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

<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>

(前):
[回転したテキストが他のテキストに重なっている画像columns]

(望ましい):
[他の列と重ならないように、独自の列内でテキストを回転させた画像]

解決策

書き込みを利用する-mode と回転を使用すると、これを実現できます効果:

.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;
}

<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 の親の高さに影響を与えないようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。