唉，我是专门来写 bug 的吧2

虽然头像是狗但其实是猫派
122 阅读3分钟

这个系列系列居然第二天就更新了，而且今天遇到了2个bug，如果按照指数发展，明天我会遇到4个bug，后天遇到8个……

第一个 bug 一句话总结：-webkit-box 方式实现 n 行文本溢出时，如果文本行高 * n < 容器的高度，可能导致出现多余内容

活是这样的，特别的简单，需要把一张 26 * 26 的 icon 图和一段 font-size 为 19 的单行文本放在一行上，icon 和单行文本上下居中，文本要是超出一行需要显示省略号

我在工作中的一些限制是：

  1. 文本必须嵌套两层 div，内层的 div 我不能控制；
  2. 只能写内联样式，无法使用 css 选择器；

然后我就写了这样的代码：

export default function App() {
  const styles = {
    wrapper: {
      width: 200,
      display: 'flex',
      alignItems: 'center',
    },

    icon: {
      width: 26,
      height: 26,
      backgroundColor: 'red',
      flex: 'none',
      marginRight: 8,
    },

    text: {
      fontSize: 19,
      height: 26,
      lineHeight: '26px',
      overflow: 'hidden',
      whiteSpace: 'nowrap',
      textOverflow: 'ellipsis',
    },
  }

  return (
    <div className="App uncontrollable">
      <div style={styles.wrapper}>
        <div style={styles.icon}></div>
        <div style={styles.text}>
          <div className="uncontrollable" style={{ lineHeight: 1 }}>
            很长的一句话一句话一句话一句话
          </div>
        </div>
      </div>
    </div>
  );
}

运行结果是这样

image.png

可以看到，在外层 div 上设置的单行文本溢出并不能生效，但我又不能控制内层 div，所以我把单行文本溢出的 css 方式改成了 -webkit-box 的方式

    text: {
      fontSize: 19,
      height: 26,
      lineHeight: '26px',
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      display: '-webkit-box',
      '-webkit-box-orient': 'vertical',
      '-webkit-line-clamp': '1',
    },

运行结果变成了这样

image.png

可以看到，虽然第一行省略了，但是会有第二行的局部出现。

这是因为内层 div上面设置了行高为 1（因为 uncontrollable 类是封装好的组件，所以我没有感知到它的样式 QAQ），使文本的行高小于了容器的高度，所以展示了第二行的部分内容

那我们就把容器的高度去掉

    text: {
      fontSize: 19,
      overflow: 'hidden',
      textOverflow: 'ellipsis',
      display: '-webkit-box',
      '-webkit-box-orient': 'vertical',
      '-webkit-line-clamp': '1',
    },

image.png

好了，不过仔细看一下上图，文本和icon图并不是完全居中的

因为文本的高度是 19px，图片的高度是 26px，相差的 7px 无法均分到文本上下两侧

相差值较小时，不能居中的问题会格外明显

那我可以给字号加上 1px 吗，不行，因为我的代码要运行在移动端，编译的时候会根据设备的字体大小，将样式映射到实际像素值，在不同设备上，文本和图片的高度的实际像素值可能是不一样的。它们有可能是奇偶性相同的，也有可能是奇偶性不同的

总之，虽然这个活很简单，但我目前还没想好一个能够解决这个问题的方案，我现在感觉自己是个没有感情的 bug 制造机器……

image.png

第二个 bug 是一个 ResizeObserver 相关的问题，因为问题不能稳定复现，我还没有找到原因……

唉，只能安慰自己，从一个集体的角度来讲，修的 bug 一定是小于写的 bug 的 ^_^

avatar
文章
阅读
粉丝