如何在Flexbox内的div中显示两行文本？

问题背景 #

在flex容器内有两个div元素，第一个div包含动态内容，需要让它显示前两行文本，但目前仅能显示一行，需调整样式实现预期效果。

原代码 #

CSS #

.flex-parent {
  display: flex;
  align-items: center;
  .flex-long {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .flex-short {
    white-space: nowrap;
    display: inline-block;
  }
}

HTML #

<div class="flex-parent">
  <div class="flex-long">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo mi et venenatis fringilla. Curabitur id tempor tellus. Aliquam commodo feugiat velit ut gravida. Cras blandit, justo eget suscipit porttitor, odio nibh suscipit neque, tincidunt dictum urna purus et lorem. Maecenas lacinia molestie dui quis varius
  </div>
  <div class="flex-short">
    Read more
  </div>
</div>

效果说明 #

• 当前效果：左侧文本仅显示一行，超出部分以省略号结尾，"Read more"按钮与单行文本垂直居中对齐。
• 预期效果：左侧文本显示前两行，超出部分以省略号结尾，布局适配多行文本的高度。

修改后的代码 #

CSS #

.flex-parent {
  display: flex;
  align-items: flex-start; /* 改为顶部对齐，适配多行文本高度 */
  gap: 10px; /* 可选：给两个元素之间添加间距 */
  .flex-long {
    flex: 1;
    overflow: hidden;
    display: -webkit-box; /* 启用webkit盒模型以支持多行省略 */
    -webkit-line-clamp: 2; /* 设置最多显示2行 */
    -webkit-box-orient: vertical; /* 文本垂直排列 */
    text-overflow: ellipsis; /* 超出部分显示省略号 */
    line-height: 1.5; /* 可选：设置行高，控制每行的高度 */
  }
  .flex-short {
    white-space: nowrap;
    display: inline-block;
    /* 可选：若希望按钮与文本块整体垂直居中，取消下方注释 */
    /* margin-top: auto;
    margin-bottom: auto; */
  }
}

HTML（无需修改） #

<div class="flex-parent">
  <div class="flex-long">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque commodo mi et venenatis fringilla. Curabitur id tempor tellus. Aliquam commodo feugiat velit ut gravida. Cras blandit, justo eget suscipit porttitor, odio nibh suscipit neque, tincidunt dictum urna purus et lorem. Maecenas lacinia molestie dui quis varius
  </div>
  <div class="flex-short">
    Read more
  </div>
</div>

关键修改说明 #

1. 移除.flex-long的white-space: nowrap，让文本可以自动换行
2. 添加webkit内核专属的多行省略属性组合：display: -webkit-box、-webkit-line-clamp: 2、-webkit-box-orient: vertical，实现最多显示2行文本并在末尾添加省略号
3. 调整.flex-parent的align-items为flex-start，避免多行文本时按钮垂直居中导致的布局不协调；如果需要按钮与文本块整体垂直居中，可保留align-items: center并给.flex-short添加margin-top: auto; margin-bottom: auto
4. 可选通过line-height控制行高，gap优化元素间距

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