文本折为两行时调整行高，实现容器内文本垂直水平居中

我明白你的痛点：固定高度40px的容器，既要让单行文本垂直居中，又要让多行文本显示前两行且同样垂直居中，还要保持溢出截断的效果。之前直接用flex套的话，多行文本的显示会出问题，那咱们用一个简单的嵌套结构+CSS属性组合来搞定这个问题。

核心思路 #

外层容器用flex实现整体的垂直水平居中，内层文本容器专门处理文本的行数限制和行高控制——这样既能保证单行文本居中，又能让两行文本刚好填满容器高度，同时截断多余内容。

完整代码示例 #

CSS 代码

.item {
  width: 245px;
  margin: 20px 10px;
  border: 1px solid grey;
  height: 40px;
  overflow: hidden;
  /* 外层用flex实现整体垂直水平居中 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px; /* 防止文本贴容器边缘，可选优化 */
}

.item-text {
  width: 100%;
  line-height: 20px; /* 两行高度刚好匹配容器40px的固定高度 */
  text-align: center;
  /* 强制最多显示两行，溢出内容自动截断 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

HTML 代码

<div class="item">
  <div class="item-text">Some Text</div>
</div>
<div class="item">
  <div class="item-text">Some Text Some Text Some Text Some Text Some Text Some Text Some TextSome Text Some Text Some Text Some Text Some Text Some Some Text Some Text Some Text Some Text Some Text Some Text Some Text</div>
</div>

为什么这个方案有效？ #

• 单行文本场景：外层flex的align-items: center会把内层文本容器垂直居中，虽然内层的line-height是20px，但flex的居中规则会让单行文本自动处于容器垂直中间位置，视觉上和直接设置line-height:40px的效果完全一致。
• 多行文本场景：内层的line-height:20px刚好让两行文本的总高度等于容器的40px，配合-webkit-line-clamp:2强制只显示前两行，溢出的内容会被overflow:hidden截断，同时外层flex的居中属性也能让两行文本整体保持垂直居中。
• 兼容性：-webkit-line-clamp在现代浏览器（Chrome、Safari、Edge、Firefox 68+）都能正常工作，完全满足大部分业务场景的需求。

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