Question

我需要实现动态线夹，具体取决于容器的高度。我要实现的解决方案是：

const Component = styled.div`
@use 'sass:math';

  display: -webkit-box;
  -webkit-line-clamp: floor(calc(100% / 20));
  -webkit-box-orient: vertical;
  overflow: hidden;
  max-height: 100%;
`

但是检查员指示floor(calc(100% / 20));为无效属性。

您对如何进行这项工作有任何想法吗？

Answer 1

我认为您应该反转函数（计算和下限）的顺序。因为 calc（100％/ 20） 不返回数字，并且函数底限需要数字作为参数。

 body {
      @use 'sass:math';
      display: -webkit-box;
      -webkit-line-clamp: calc(floor(100% / 20));
      -webkit-box-orient: vertical;
      overflow: hidden;
      max-height: 100%;
    }

我在实时SASS编辑器中对其进行了测试，请查看https://www.sassmeister.com/gist/24b2639cd1680c0ceceb37f910654efe

样式组件+ SCSS

1 个答案: