如何实现不同长度文本列表旋转后底部对齐且间距均等？

我有一组长度各不相同的文本，需要先对这些文本执行旋转操作，再让它们底部对齐，同时文本之间的间距要保持均等，不受文本长度影响。

修正后的实现代码 #

CSS 代码

.text-container {
  display: flex;
  justify-content: space-around; /* 实现均等间距 */
  align-items: flex-end; /* 底部对齐 */
  height: 200px;
  padding: 0 20px;
}

.rotated-text {
  transform: rotate(-45deg);
  line-height: 1.5;
  position: relative;
  bottom: 30px; /* 调整旋转后的垂直位置，确保底部对齐 */
  white-space: nowrap; /* 避免文本换行影响间距 */
}

HTML 代码

<div class="text-container">
  <span class="rotated-text">My Vertical Text</span>
  <span class="rotated-text">My Text</span>
  <span class="rotated-text">My Vertical Text</span>
  <span class="rotated-text">a</span>
  <span class="rotated-text">My Vertical Text number 4</span>
  <span class="rotated-text">helooo</span>
</div>

关键说明 #

• 改用flex布局的justify-content: space-around实现文本间的均等间距，彻底摆脱文本长度对间距的影响
• 用align-items: flex-end直接实现容器内元素的底部对齐，比原代码的vertical-align更稳定
• 将重复的id="text"改为class="rotated-text"，符合HTML规范（id必须唯一）
• 添加white-space: nowrap防止文本换行，确保旋转后的布局一致性

内容的提问来源于stack exchange，提问作者Stefani Toto