一些平时比较少用的或不容易记住的css样式

在写页面时，经常会碰到有的样式怎么都去不掉或不知道怎么写，在这篇随笔里会不定时更新记录

1.单行文本超出使用省略号

1 p{
2     width: 300px;
3     /* 溢出隐藏 */
4     overflow: hidden;
5     /* 隐藏的部分用...表示 */
6     text-overflow: ellipsis;
7     /* 文字不能转行 */
8     whitewhite-space: nowrap;    
9 }

View Code

2.多行文本超出时使用省略号

超过两行显示省略号

div{
        font-family: "楷体";
        font-size: 20rpx;
        /* 超出两行显示省略号 */
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
}

 1 .multy {
 2     /* 多行文本溢出 */
 3     overflow: hidden;
 4     /* 文本溢出显示省略号 */
 5     text-overflow: ellipsis; 
 6     display: -webkit-box;
 7     -webkit-line-clamp: 3;
 8     -webkit-box-orient: vertical;
 9     width: 130px;
10     background-color: cornflowerblue;
11 }

View Code

但是上述方法兼容性不好，所以另一种写法是根据高和行高来控制行数，然后给容器添加后缀为“...”，使超出部分显示为省略号。代码如下：

 1 .multy {
 2         position: relative;
 3     line-height: 20px;
 4     height: 60px;
 5     overflow: hidden;
 6     width: 130px;
 7         border: 1px solid red;
 8 }
 9 
10 .multy:after {
11     content: "...";
12     font-weight: bold;
13     position: absolute;
14     bottom: 0;
15     right: 0;
16     padding-left: 20px;
17     background: -webkit-linear-gradient(left, transparent, #fff 50%);
18     background: -o-linear-gradient(right, transparent, #fff 50%);
19     background: -moz-linear-gradient(right, transparent, #fff 50%);
20     background: linear-gradient(to right, transparent, #fff 50%);
21             }

View Code

3.用css做对话框

之前一直不是很懂为什么用border可以做出来箭头的效果，现在看了这篇文章就明白了，链接：https://www.jianshu.com/p/cf378c0f1ec2

4.设置select文字居中？

第一种方法：

1 select{
2     width: 200px;
3     text-align: center;
4     text-align-last: center;
5 }

View Code

效果如下：

但是这种方法点开option选项，option选项内容还是默认居左的，于是我又找了另外一种方法：

1 select {
2     width: auto;
3     padding: 0 2%;
4     margin: 0;
5 }
6 option {
7     text-align: center;
8 }

View Code

演示效果如下：

根据自己的需求来选择居中的方式。

5.让select下拉框有placeholder的效果，这种方法可用于表单验证，下拉框必填时

1 <select>
2     <option value='' disabled selected style='display:none;'>--请选择--</option>
3     <option value='0'>北京</option>
4     <option value='1'>上海</option>
5 </select>

6.object-position/object-fit

object-fit和object-position之间的关系有点类似于background-size和background-position

(1) object-fit具体有5个值：
object-fit: fill 　　　　中文释义“填充”。默认值。被设置此样式的元素拉伸填满整个content box, 不保证保持原有的比例。

object-fit: contain; 　中文释义“包含”。保持原有尺寸比例。保证被设置此样式的元素尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。

object-fit: cover; 中文释义“覆盖”。保持原有尺寸比例。保证被设置此样式的元素尺寸一定大于容器尺寸，宽度和高度至少有一个和容器一致。因此，此参数可能会让被设置此样式的元素（如图片）部分区域不可见。

object-fit: none; 中文释义“无”。保持原有尺寸比例。同时保持被设置此样式的元素原始尺寸大小。

object-fit: scale-down; 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

(2) object-position和 background-position相似，默认是是居中显示

可设置的值如：
left/right/center/10px/-10px top/bottom/center/10px/-10px
right 10px top 10px 距离外部盒子右侧10px、上侧10px

参考链接如下：

https://blog.csdn.net/qq_16494241/article/details/72730855

7.字体自动换行第二行缩进任意字符

p{
    text-indent: -4em;
    margin-left: 4em;
}

设置 text-indent: -4em; 以后p标签中第一行文字向左偏移 4em，这样第二行开始的文字就等于向右缩进了，但是这样设置会导致第一行向左超出 div 4em，所以再用 margin-left 使 p 标签整体右移即可

该设置要点是margin-left的参数要和 text-indent 一致

8. 滚动条隐藏

.element::-webkit-scrollbar { width: 0 !important }