How Can I Prevent Rotated Inline Elements from Affecting Their Parent's Height in CSS?

Rotated Elements Affecting Parent Height in CSS

When applying rotation to an inline element, it's crucial to ensure that the parent's height is not adversely affected. Consider the scenario where we have multiple columns with text and wish to rotate a few.

Example:

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

(Before):
[Image of rotated text overlapping other columns]

(Desired):
[Image of rotated text within its own column, not overlapping others]

Solution

Utilizing writing-mode and rotate, we can achieve this desired effect:

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

(After):
[Image of rotated text within its own column, not overlapping others]

This solution ensures that the rotated elements respect their parent's height, preventing text overlap.

The above is the detailed content of How Can I Prevent Rotated Inline Elements from Affecting Their Parent's Height in CSS?. For more information, please follow other related articles on the PHP Chinese website!