css一些使用总结

## css 单行，多行省略

单行省略

        max-width: 100px; // 指定最大宽度
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

多行省略（有问题，待修改）

.mul-ellipsis() {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-break: break-all; // 让文字可以换行
}

1px

使用伪类

// 修改鼠标选中字体的颜色

::selection {
  color: #fff;
  background: #3262fd;
}

行的下划线消失问题

默认增加如下就可以实现：

text-decoration:underline;

对于一些特殊字母，如j，就会不显示下换线，增加如下全局样式：

* {
  text-underline-position: under;
}

行内元素设置oerflow：hidden，其他元素无法对其

一个块级元素中有几个在同一水平线上的行内块元素，设置其中某个元素的oveflow:hidden之后，会导致这几个行内元素不再是同一水平线上对齐

原因是： 1）行内元素的默认vertical-align:baseline（基线对齐），设置overflow不为visible之后会改变他的基线为下边距边缘 2）其他行内元素为了对齐，就会发生向下偏移的现象

解决方案：设置overflow的行内元素对齐方式 vertical-align:bottom 参考链接： wow.techbrood.com/fiddle/1543…

滚动事件

首先确定需要滚动的元素

1.默认情况下给需要滚动的子元素的父元素设置固定高度，然后添加overflow-y: auto

  height: calc(100vh - 180px);
  overflow-y: auto;

然后如果需要隐藏滚动条：

  &::-webkit-scrollbar {
  width: 0 !important
  }

然后监听父元素的滚动事件

  const onScroll = throttle(
    e => {
      const { scrollHeight, scrollTop, clientHeight } = e.target
      console.log(scrollHeight, scrollTop, clientHeight);
      const scroll = scrollTop - beforeScrollTop
      // console.log(scrollTop, beforeScrollTop, scroll, 'scrollTop, beforeScrollTop, scroll');
      if (scroll > 0) {
        if (scrollTop + clientHeight + 30 >= scrollHeight) {
          // 加载下一页 console.log('加载下一页');
          onUpdate('nextPage', {})
        }
      }
      beforeScrollTop = scrollTop
    }, 500)

span之间有缝隙

1.font-size:0 2.设置margin-right: -4px 或者参考：juejin.cn/post/708794…

目前没有一劳永逸的方案可以解决这个问题