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

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

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

p{
    width: 300px;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 隐藏的部分用...表示 */
    text-overflow: ellipsis;
    /* 文字不能转行 */
    whitewhite-space: nowrap;    
}

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;
}

.multy {
    /* 多行文本溢出 */
    overflow: hidden;
    /* 文本溢出显示省略号 */
    text-overflow: ellipsis; 
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    width: 130px;
    background-color: cornflowerblue;
}

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

.multy {
        position: relative;
    line-height: 20px;
    height: 60px;
    overflow: hidden;
    width: 130px;
        border: 1px solid red;
}

.multy:after {
    content: "...";
    font-weight: bold;
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: 20px;
    background: -webkit-linear-gradient(left, transparent, #fff 50%);
    background: -o-linear-gradient(right, transparent, #fff 50%);
    background: -moz-linear-gradient(right, transparent, #fff 50%);
    background: linear-gradient(to right, transparent, #fff 50%);
            }                

 

3.用css做对话框

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

 

4.设置select文字居中？

第一种方法：

select{
    width: 200px;
    text-align: center;
    text-align-last: center;
}

 效果如下：

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

select {
    width: auto;
    padding: 0 2%;
    margin: 0;
}
option {
    text-align: center;
}

 演示效果如下：

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

 

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

 

<select>
    <option value='' disabled selected style='display:none;'>--请选择--</option>
    <option value='0'>北京</option>
    <option value='1'>上海</option>
</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 }

 

9.