如何实现book-spine竖排文字居中且超长文本省略号截断？

以下是几种能同时实现书脊居中+文本截断的方案，按需选择：

方案一：Flex嵌套Block元素（兼容所有主流浏览器） #

HTML结构 #

<div class="shelf">
  <div class="book-spine">
    <span class="spine-text">这是一段超长的书脊文本，需要被截断显示省略号</span>
  </div>
</div>

CSS代码 #

/* 书架容器：负责书脊的整体居中 */
.shelf {
  width: 120px;
  height: 350px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

/* 书脊容器：内部文本居中 */
.book-spine {
  width: 70px;
  height: 280px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px;
}

/* 文本块：处理截断逻辑 */
.spine-text {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; /* 单行截断 */
  text-align: center;
}

多行截断调整：如果需要多行截断，修改.spine-text的CSS：

.spine-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3; /* 最多显示3行 */
  overflow: hidden;
  width: 100%;
  text-align: center;
}

方案二：Grid布局实现（代码更简洁） #

利用Grid的place-items属性快速实现居中，文本截断逻辑和方案一一致：

CSS代码 #

.shelf {
  width: 120px;
  height: 350px;
  border: 1px solid #ddd;
  display: grid;
  place-items: center;
  padding: 15px;
}

.book-spine {
  width: 70px;
  height: 280px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  display: grid;
  place-items: center;
  padding: 6px;
}

.spine-text {
  display: block;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

方案三：单行文本极简方案 #

如果只需要单行文本，可省略嵌套元素，直接用line-height实现垂直居中：

CSS代码 #

.shelf {
  width: 120px;
  height: 350px;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
}

.book-spine {
  width: 70px;
  height: 280px;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  text-align: center;
  line-height: 280px; /* 与书脊高度一致，实现单行垂直居中 */
  padding: 0 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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