CSS的一些小技巧（持续更新）

CSS的一些小技巧（持续更新）

仅作css用到的又比较少见的一些属性或者特殊用法的记录，个人笔记，持续更新…

文本换行时隐藏多余的文字

用习惯了各种组件库实现的多余文字隐藏，自己弄还是头一回，网上很多都是通过js计算文本宽度，文字个数等去实现隐藏，但是最近找到了一个css的方案很好用，特此记录下来。

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;

说明

• text-overflow：text-overflow 属性指定当文本溢出包含它的元素时，应该如何显示。可以设置溢出后，文本被剪切、显示省略号 (…) 或显示自定义字符串（不是所有浏览器都支持）。text-overflow 需要配合以下两个属性使用：
  white-space: nowrap;
  overflow: hidden;

值	描述
clip	剪切文本。
ellipsis	显示省略符号 … 来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。
initial	设置为属性默认值。
inherit	从父元素继承该属性值。

• display: -webkit-box：CSS3新新添加的盒子模型属性。相关文章
• -webkit-box-orient：子元素排列 vertical（竖排）orhorizontal（横排）
• -webkit-line-clamp：line-clamp属性可以限制在一个块元素显示的文本的行数，为了实现该效果，它需要组合其他外来的WebKit属性，添加-WebKit-前缀。相关文章

不知道是我不会用还是原本就如此，单独使用text-overflow：ellipsis；white-space: nowrap；overflow: hidden；并没有省略号，得加上盒子模型才行

滚动条的样式设置

::-webkit-scrollbar{}/* 整体设置 */
::-webkit-scrollbar-button {}：/* 滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 */
::-webkit-scrollbar-track {}：/* 外层轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。 */
::-webkit-scrollbar-track-piece {}：/* 内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖第三个属性的样式。 */
::-webkit-scrollbar-thumb {}：/* 滚动条里面可以拖动的那部分 */
::-webkit-scrollbar-corner {}：/* 边角，两个滚动条交汇处 */
::-webkit-resizer {}：/* 两个滚动条交汇处用于拖动调整元素大小的小控件（基本用不上） */

• 多次测试后发现，滚动条的样式设置不能设置为全局样式，设置为全局样式并不起作用，必须在出现滚动条的元素的父级元素下设置滚动条样式才生效，也有可能是我设置全局样式的方式有误的原因。
• 多次测试发现直接在::-webkit-scrollbar{}里只能设置竖向滚动条的宽度，并不能设置横向滚动条的高度，要设置横向滚动条的高度需要使用::-webkit-scrollbar:horizontal{}才能设置