如何用CSS让旋转后的p标签文本长度匹配父div高度？

要让旋转270度后的文本长度和父容器高度完全一致，我们需要调整元素的定位、旋转原点以及尺寸关联逻辑，确保旋转后的视觉尺寸刚好贴合父容器高度。以下是具体的修改方案：

问题分析 #

你当前的代码中，.skills-text容器没有占满父容器的高度，且旋转后的文本元素尺寸未与父容器高度绑定，导致无法实现匹配效果。我们需要先让文本的父容器占满高度，再调整旋转元素的尺寸和原点，让旋转后的文本长度精准贴合父容器高度。

修改后的完整代码 #

CSS代码

body{ 
  height:100vh; 
  margin: 0; /* 移除默认边距，避免页面出现不必要的滚动条 */
}
.about-2 { 
  display: grid; 
  grid-template-columns: 5% 90%; 
  column-gap: 5%; 
  height: 100%; 
  position: relative; 
}
.about-2 .skills-text {
  height: 100%; /* 让文本容器完全占满父容器的高度 */
  position: relative; /* 作为绝对定位子元素的参考容器 */
}
.about-2 .skills-text p { 
  transform: rotate(270deg); 
  transform-origin: bottom left; /* 设置旋转原点为容器左下角，保证旋转方向和对齐逻辑正确 */
  position: absolute; 
  bottom: 0; 
  left: 0; 
  width: 100vh; /* 宽度设为父容器的高度（与body视口高度一致），旋转后视觉上的垂直长度就等于父容器高度 */
  font-size: 1.5em; 
  color: #face6f; 
  text-align: center; /* 让文本在旋转后的容器内居中，优化视觉对齐效果 */
  padding: 0; /* 移除原有padding，避免干扰尺寸匹配 */
}

HTML代码

<div class="about-2">
  <div class="skills-text">
    <p class="dash">My skills</p>
  </div>
  <div class="skillset">
    <div>skill 1</div>
    <div>skill 2</div>
    <div>skill 3</div>
    <div>skill 4</div>
  </div>
</div>

关键调整说明 #

• 给.skills-text添加height: 100%：确保文本容器和父容器.about-2高度完全一致，为后续文本尺寸匹配提供基准。
• 设置transform-origin: bottom left：让文本从左下角开始旋转，保证旋转后文本的顶端对齐容器顶端、底端对齐容器底端。
• 将p标签的width设为100vh：旋转270度后，元素的宽度会转换为视觉上的垂直长度，这个值刚好等于父容器的高度，完美实现文本长度与父容器高度匹配。
• 添加text-align: center：让文本在旋转后的容器内居中，提升整体视觉对齐的美观度。

如果你的父容器高度不是基于视口的，也可以用height: 100%替代100vh，只要保证p标签的宽度等于父容器的实际高度即可。

内容的提问来源于stack exchange，提问作者Mendi Sterenfeld