React实现可调整容器：最多显示2行子元素并截断长文本

1. 实现子元素文本最多2行并截断 #

原代码中whiteSpace: nowrap强制子元素文本单行显示，这不符合需求。要实现多行文本截断，需要替换为WebKit私有属性组合：

const css = { 
  border: "1px solid red", 
  margin: "4px",
  overflow: "hidden",
  textOverflow: "ellipsis",
  // 多行截断核心配置
  display: "-webkit-box",
  WebkitLineClamp: 2, // 限制最多显示2行
  WebkitBoxOrient: "vertical",
  padding: "2px",
  minWidth: "60px", // 防止子元素被过度挤压
  wordBreak: "break-word" // 允许长单词换行
};

2. 限制容器最多显示2行子元素 #

父容器用flex-wrap: wrap实现子元素换行，通过计算刚好容纳2行子元素的高度，设置为maxHeight，配合overflow: hidden隐藏超出的子元素：

export default function App() {
  // 计算容器最大高度：子元素行高*2 + 上下margin总和
  const lineHeight = 20; // 可根据需求调整子元素行高
  const containerMaxHeight = lineHeight * 2 + 8; // 8是子元素上下margin各4px的总和

  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        border: "1px solid green",
        maxHeight: `${containerMaxHeight}px`,
        overflow: "hidden",
        resize: "horizontal", // 允许容器横向调整大小
        padding: "4px" // 避免子元素贴容器边缘
      }}
    >
      <div style={css}>Long child text that wraps to two lines and truncates when too long</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
    </div>
  );
}

关键细节说明 #

• -webkit-line-clamp 是WebKit内核浏览器支持的属性，必须配合display: -webkit-box和-webkit-box-orient: vertical才能生效，用来限制文本行数。
• 容器maxHeight需根据子元素实际尺寸计算，确保刚好放下2行子元素，超出部分会被overflow: hidden隐藏。
• resize: horizontal让容器支持手动调整宽度，满足“可调整大小”的需求。

完整可运行代码 #

const css = { 
  border: "1px solid red", 
  margin: "4px",
  overflow: "hidden",
  textOverflow: "ellipsis",
  display: "-webkit-box",
  WebkitLineClamp: 2,
  WebkitBoxOrient: "vertical",
  padding: "2px",
  minWidth: "60px",
  wordBreak: "break-word",
  lineHeight: "20px" // 固定行高，方便计算容器高度
};

export default function App() {
  const containerMaxHeight = 20 * 2 + 2 * 2 + 8; // 行高*2 + 内边距上下*2 + 子元素上下margin总和
  return (
    <div
      style={{
        display: "flex",
        flexWrap: "wrap",
        border: "1px solid green",
        maxHeight: `${containerMaxHeight}px`,
        overflow: "hidden",
        resize: "horizontal",
        padding: "4px"
      }}
    >
      <div style={css}>Long child text that should wrap to two lines and truncate if it exceeds the line limit</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
      <div style={css}>child1</div>
    </div>
  );
}

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