How Can I Make Rotated CSS Elements Correctly Influence Their Parent's Height?

Rotated Elements in CSS: Influencing Parent Height Correctly

In CSS, it's possible to rotate elements without affecting the layout or flow of the document. However, questions arise when elements need their rotated text to impact their parent's height.

Consider the following scenario:

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

Applying the following CSS:

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

Results in the rotated text overlapping neighboring elements. The goal is to modify the CSS to ensure that the rotated element correctly affects its parent's height, preventing text overlap.

Solution

Taking advantage of the improved support for writing-mode in modern browsers, a solution can be achieved using a combination of properties:

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

This updated CSS ensures that the rotated element respects the height of its parent container, thus preventing text overlap and achieving the desired layout.

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