How to Prevent CSS Rotated Elements from Overlapping Other Elements?

Rotated Elements in CSS that Align Vertically

In CSS, you can use the writing-mode property to rotate text vertically. However, rotating text can affect the positioning of its parent elements. This can lead to unexpected results, such as text overlapping other elements.

Problem:

Consider the following example:

<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 b {
  writing-mode: tb-rl;
  white-space: nowrap;
  display: inline-block;
  overflow: visible;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}

This code results in the following layout:

[Image of text in four columns, with the third column rotated 90 degrees]

As you can see, the rotated text overlaps the other elements.

Solution:

To fix this issue, you can use the writing-mode property on the parent element to rotate the text vertically. This will ensure that the rotated text aligns correctly within the parent element.

.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 code results in the following layout:

[Image of text in four columns, with the third column rotated vertically]

As you can see, the rotated text is now aligned vertically within the parent element, and does not overlap the other elements.

The above is the detailed content of How to Prevent CSS Rotated Elements from Overlapping Other Elements?. For more information, please follow other related articles on the PHP Chinese website!