个人 CSS 片段笔记库

单行文本超出…

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行文本超出…

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

滚动条样式

div::-webkit-scrollbar {/* 滚动条整体部分 */}
div::-webkit-scrollbar-thumb {/* 滑块部分 */}
div::-webkit-scrollbar-track {/* 轨道部分 */}
div::-webkit-scrollbar-button {/* 两端按钮 */}
div::-webkit-scrollbar-track-piece {/* 没有滑块的轨道部分 */}
div::-webkit-scrollbar-corner {/* 当同时有垂直滚动条和水平滚动条时交汇的部分 */}
div::-webkit-resizer {/* 某些元素的corner部分的部分样式(例:textarea的可拖动按钮)，注意此方案有兼容性问题，一般需要隐藏滚动条时我都是用一个色块通过定位盖上去，或者将子级元素调大，父级元素使用 overflow-hidden 截掉滚动条部分。暴力且直接 */}