회전된 인라인 요소가 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>

(이전):
[다른 텍스트와 겹치는 회전된 텍스트의 이미지 열]

(원함):
[다른 열과 겹치지 않고 자체 열 내에서 회전된 텍스트 이미지]

해결책

글쓰기 활용 -모드 및 회전을 통해 원하는 결과를 얻을 수 있습니다. 효과:

.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!