单行省略

2024年07月11日

柏拉文

越努力，越幸运

一、模块A 模块B 模块C

---

描述: 中间的 模块B 在剩余空间里自适应，超出剩余空间隐藏。模块 A 和 模块 C 自适应内容大小。场景如下:

• 《 xxx…… 》

• 头像 名称… 勋章

实现如下

实时编辑器

function Test(props) {
  const textStyle = {
    width: '500px',
    display: 'flex',
    alignItems: 'center',
    jusitifyContent: 'flex-start',
  }
  const textStyleA = {
    flex: "none",
    marginRight: '24px',
  }
  const textStyleB = {
    flex: 1,
    overflow: 'hidden',
    marginRight: '24px',
    whiteSpace: 'nowrap',
    textOverflow: "ellipsis",
  }
  const textStyleC = {
    flex: 'none'
  }
  const textStyleD = {
    flex: 'none'
  }
  
  return (
     <div style={textStyle}>
        <span style={textStyleA}>文本A</span>
        <span style={textStyleB}>文本B文本B文本B文本B文本B文本B文本B文本B文本B文本B文本B文本B</span>
        <span style={textStyleC}>文本C</span>
        <span style={textStyleD}>文本D</span>
     </div>
  );
}

结果

Loading...