未超出一行不要显示展开

需求：要求当前显示的文字或多条dom节点的组合，超过一行时显示展开，点击展开时展开全部，当未超过一行时正常显示。

• 思路1:获取全部文字或dom显示时的高度，然后和一行高度做对比，如果大于，则显示展开的按钮
• 思路2:设定（或获取）每条dom的长度，求出长度和，然后再与当前一行做对比，如果大于，则显示展开按钮

从上可以看到都需要js介入。那么能否有一种方法，可以仅由css完成呢

• 思路3:

  1. 使用两个协助dom，一个始终放当前行的最右边，作为展开按钮。使用float: right或position: absolute。我使用的float，这样文字的行高就不用处理了

  2. 另一个协助dom用于遮盖。使用position: absolute; z-index: 1; right: 0;。注意，只需设置right即可，不设置top或bottom时，会跟随文字换行

代码如下，使用react写的dome，输入更多文字或减少文字时观察变化

const [open, setOpen] = useState(false)
const [input, setInput] = useState(
  '这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字这是文字'
)
return (<div>
    <Input value={input} onChange={(e) => setInput(e.target.value)} />
<div
  style={{
    position: 'relative',
    backgroundColor: '#fff',
    overflow: 'hidden',
    height: open ? 'auto' : '22px' // 当前一行高度
  }}
>
  <div
    style={{ color: 'red', float: 'right', cursor: 'pointer' }}
    onClick={() => setOpen(!open)}
  >
    {open ? '收缩' : '展开'}
  </div>
  <div>
    {input}
    <span
      style={{
        color: '#fff', // 这里需要与背景色相同
        backgroundColor: 'currentcolor',
        position: 'absolute',
        zIndex: 1,
        use-select: 'none',
        right: 0
      }}
    >
      展开
    </span>
  </div>
</div>
</div>)