我来帮你搞定这个垂直文本的布局问题，刚好之前做过类似的需求，结合Flexbox和CSS书写模式就能实现你要的效果：

实现思路 #

核心是利用writing-mode实现垂直文本排列，搭配Flexbox处理短文本居中、长文本底部对齐，再结合text-overflow实现溢出省略。同时用视口单位（vh）让容器高度响应窗口变化。

完整代码示例 #

HTML结构 #

<div class="vertical-container">
  <p class="vertical-text">这里是你的垂直文本内容，可以是短文本，也可以是很长很长的一段测试文本，看看溢出时的省略效果</p>
</div>

CSS样式 #

/* 垂直文本容器 */
.vertical-container {
  /* 响应式高度，随窗口高度变化，可根据需求调整比例 */
  height: 70vh;
  /* 容器宽度，适配单个文字的宽度，可调整 */
  width: 55px;
  border: 1px solid #e0e0e0;
  overflow: hidden; /* 隐藏溢出内容，配合省略号 */
  
  /* 核心：设置垂直书写模式 */
  writing-mode: vertical-lr;
  /* 让文字直立显示，可选mixed（默认，保留部分字符方向）或upright */
  text-orientation: upright;
  
  /* Flex布局处理对齐 */
  display: flex;
  /* 垂直方向（主轴）底部对齐，长文本时从底部开始排列 */
  justify-content: flex-end;
}

/* 垂直文本内容 */
.vertical-text {
  /* 短文本时，上下margin:auto会自动居中；长文本时margin失效，保持底部对齐 */
  margin: auto 0;
  /* 强制不换行，确保文本垂直单行排列（如果需要多行可去掉，配合-webkit-line-clamp处理多行省略） */
  white-space: nowrap;
  /* 溢出时显示省略号 */
  text-overflow: ellipsis;
  /* 隐藏溢出内容 */
  overflow: hidden;
  
  /* 可选：调整文字样式 */
  font-size: 16px;
  line-height: 1.4;
}

效果说明 #

1. 短文本居中：当文本长度小于容器高度时，margin: auto 0会让文本在容器垂直方向自动居中，水平方向因为writing-mode: vertical-lr会默认居中（若要调整水平对齐，可加align-items: center）。
2. 长文本底部对齐：当文本长度超过容器高度时，Flex的justify-content: flex-end会让文本底部和容器底部对齐，文本向上延伸，超出容器的部分被隐藏。
3. 响应式适配：容器高度用vh单位，窗口缩小/放大时容器高度自动变化，文本始终保持底部对齐，不会隐藏底部内容。
4. 长文本省略号：white-space: nowrap+text-overflow: ellipsis确保文本溢出时在末尾（底部）显示省略号。

如果需要多行垂直文本的省略效果，可以去掉white-space: nowrap，改用-webkit-line-clamp（注意浏览器兼容性），调整CSS如下：

.vertical-text {
  margin: auto 0;
  overflow: hidden;
  text-overflow: ellipsis;
  /* 设置多行省略的行数 */
  display: -webkit-box;
  -webkit-line-clamp: 8;
  -webkit-box-orient: vertical;
}

这样就能实现多行垂直文本从底部开始排列，溢出时末尾加省略号的效果啦！

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