问题说明 #

创建Testimonial组件，容器为flex-direction: column的flex布局，包含profile-image、name、feedback三个子元素。为feedback设置flex-grow: 1以占满父容器剩余空间，需求是：

• feedback内文本自动换行
• 文本溢出时显示省略号
• 保持父容器的aspect ratio
  当前问题：文本溢出时容器高度被撑大，无法维持预期比例。

解决方案 #

修改feedback的CSS样式，添加溢出控制和多行省略相关属性，同时确保父容器尺寸不受子元素内容影响：

修改后的CSS代码 #

body {
  margin: 0px;
  padding: 0px;
}

.testimonial-container {
  width: 300px;
  aspect-ratio: 4/5;
  margin: 2px;
  padding-top: 20px;
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  /* 防止子元素内容撑大容器 */
  overflow: hidden;
}

.testimonial-container .profile-image {
  margin-top: 20px;
  text-align: center;
}

.testimonial-container .profile-image img {
  height: 80px;
  width: 80px;
  clip-path: circle(50%);
  object-fit: cover;
}

.testimonial-container .name {
  color: orange;
  text-align: center;
}

.testimonial-container .feedback {
  flex-grow: 1;
  text-align: center;
  background-color: rgb(166, 199, 170);
  /* 开启溢出隐藏 */
  overflow: hidden;
  /* 多行省略配置 */
  display: -webkit-box;
  -webkit-line-clamp: unset; /* 需固定行数可设具体数字，如3 */
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  /* 确保元素可收缩 */
  flex-shrink: 1;
}

关键修改点 #

• 父容器添加overflow: hidden：确保父容器严格遵循aspect-ratio设定的尺寸，不会被内部溢出内容撑大。
• feedback添加overflow: hidden：限制文本在分配的空间内显示，超出部分隐藏。
• 配置多行省略属性：通过display: -webkit-box、-webkit-line-clamp、-webkit-box-orient: vertical实现多行文本溢出显示省略号，若需固定行数，将-webkit-line-clamp设为具体数字即可。
• 保留flex-grow: 1并设置flex-shrink: 1：保证feedback占满父容器剩余空间，同时在空间不足时可正常收缩。

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