前端知识点

配色方案

本页目录

overflow 溢出 ​

属性值 ​

  • visible 默认值
  • hidden 超出隐藏
  • scroll 无论是否超出都会有滚动条
  • auto 如果超出，则会出现滚动条
  • clip

生效条件 ​

  • diaplay: 不能为 inline
  • 有固定尺寸
  • 单元格 td 元素，需要 table 设置 table-layout: fixed

滚动条美化 ​

  • ::-webkit-scrollbar 整个滚动条
  • ::-webkit-scrollbar-button 滚动条按钮 (上下箭头)
  • ::-webkit-scrollbar-thumb 滚动条滚动滑块
  • ::-webkit-scrollbar-track 滚动条轨道
  • ::-webkit-scrollbar-track-piece 滚动条没有滑块的轨道部分

创建 BFC ​

非 visible 属性可创建 BFC，具体查看 BFC 文档。

文字溢出 ​

单行溢出 ​

CSS
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

多行溢出 ​

CSS
.double-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* 行数 */ 
    -webkit-box-orient: vertical;
}
.double-line {
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;  /* 行数 */ 
    -webkit-box-orient: vertical;
}