Styled Component中MessageText文本重叠问题的修复方法咨询

我在EditMessageModal组件中用styled-components定义了MessageText组件，代码如下：

const MessageText = styled(TextWithPaddingLeft)`
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  font-weight: 400;
  line-height: 22px;
  padding-right: 39px;
  text-overflow: ellipsis;
  overflow-y: auto;
`

当文本内容较多时，会出现文本与其他内容重叠的问题，严重影响可读性和视觉体验。

问题根源 #

你同时使用了-webkit-line-clamp: 3（多行截断）和overflow-y: auto（垂直滚动），这两个属性存在冲突：-webkit-line-clamp需要依赖overflow: hidden来实现文本截断，但overflow-y: auto会让容器在内容超出时尝试显示滚动条，若未明确限制容器高度，内容会突破容器边界，进而和其他元素重叠。

两种可行修复方式 #

方式一：保留滚动功能（内容超3行可滚动查看）

给容器设置固定高度，高度值匹配3行文本的总高度（line-height:22px × 3 = 66px），确保容器不会被内容撑开：

const MessageText = styled(TextWithPaddingLeft)`
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  font-weight: 400;
  line-height: 22px;
  padding-right: 39px;
  height: 66px; /* 固定高度匹配3行文本 */
  overflow-y: auto;
  overflow-x: hidden; /* 隐藏不必要的水平滚动条 */
`

方式二：仅显示截断效果（超3行显示省略号，无滚动）

如果不需要滚动，直接把overflow-y: auto替换为overflow: hidden，确保文本超出3行时自动截断并显示省略号：

const MessageText = styled(TextWithPaddingLeft)`
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  font-weight: 400;
  line-height: 22px;
  padding-right: 39px;
  text-overflow: ellipsis;
  overflow: hidden; /* 截断效果依赖的核心属性 */
  height: 66px; /* 可选：固定高度避免容器高度波动 */
`

额外提示 #

• 检查父容器是否设置了overflow: visible，这可能导致内容溢出到父容器外部。
• 如果TextWithPaddingLeft本身有上下内边距，需要调整height值，比如内边距为4px的话，高度设为calc(66px + 8px)。

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