常用易忘CSS小技巧-杨标的博客

常用易忘CSS小技巧

解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

.wrap{
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
}

超出部分显示省略号

/* 单行文本 */
.wrap{
    overflow: hidden;   /*超出部分隐藏*/
    text-overflow: ellipsis;  /*超出部分显示省略号*/
    white-space: nowrap;  /*规定段落中的文本不进行换行 */
}
/* 多行文本 */
.wrap{
    width: 100%;
    overflow: hidden;
    display: -webkit-box;    /*将对象变成弹性盒子*/
    -webkit-box-orient: vertical;   /*设置弹性盒子排列方式*/
    -webkit-line-clamp: 3;  /*用来聘用制在一个元素中显示的文本行数*/
    word-break: break-all;  /* 让浏览器实现任意位置换行，break-all为允许单词换行*/
}

css实现不换行、自动换行、强制换行

/* 不换行 */
.wrap{
    white-space: nowrap;
}
/* 自动换行 */
.wrap{
    word-wrap: break-word;
    word-break: normal;
}
/* 强制换行 */
.wrap{
    word-break: break-all;
}

CSS实现文本两端对齐

.wrap{
    text-align: justify;
    text-justify: distribute-all-lines;  /*IE6~8*/
    text-align-last: justify;   /*一个块或行的最后一行对齐方式*/
    -moz-text-align-last: justify;
    -webkit-text-align-last:justiry;
}

实现文字竖向排版

/* 单选展示 */
.wrap{
    width: 25px;
    line-height: 18px;
    height: auto;
    font-size: 12px;
    padding:8px 5px;
    word-wrap: break-word;
}
/* 多行展示时 */
.wrap{
    height: 210px;
    line-height: 30px;
    text-align: justify;   
    writing-mode: vertical-lr; /*从左向右*/
    writing-mode:tb-lr;         /*IE从左向右*/
    /* writing-mode: vertical-rl; 从右向左*/
    /* writing-mode: tb-rl;    从右向左*/
}

使元素鼠标事件失效

.wrap{
    /* 如果tab能够选中该元素，如button,然后按回车还是能执行事件，如click */
    pointer-events: none;
    cursor: default;
}

禁止用户选择

.wrap{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select:none;
    -moz-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

Text-transform和Font Variant

p {text-transform: uppercase;}  /*将所有字母变成大写*/
p {text-transform: lowercase;}  /*将所有字母变成小写*/
p {text-transform: capitalize;} /*首字母大写*/
p {font-variant: small-caps;}   /*将字体变成小型的大写字母*/

将一个容器设为透明

.wrap{
    opacity: 0.5;
    filter: alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
}

自定义滚动条


/* 整个滚动条 */
::-webkit-scrollbar{
    width: 5px;
}
/* 滚动条的轨道 */
::-webkit-scrollbar-track{
    background-color: #990000;
    border-radius: 5px;
}
/* 滚动条的滑块 */
::-webkit-scrollbar-thumb{
    background-color: #009900;
    border-radius: 5px;
}

让 HTML 识别 string 里的 '\n' 并换行
```
body{
    white-space: pre-line;
}
```

实现一个三角形

.wrap{
    border-color: transparent transparent green transparent;
    border-style: solid;
    border-width: 0px 300px 300px 300px;
    width: 0px;
    height: 0px;
}

移除被点链接的边框
```
a {outline: none;}
a {outline: 0;}
```

使用CSS显示链接之后的URL

a::after{
    content: "("attr(href)")";
}

select内容居中显示、下拉内容右对齐

select{
    text-align: center;
    text-align-last: center;
}
select option{
    direction: rtl;
}

修改input输入框中光标的颜色不改变字体的颜色
```
input{
    color: #fff;
    caret-color: red;
}
```

修改input 输入框中 placeholder 默认字体样式

/* webkit为核心的浏览器 */
input::-webkit-input-placeholder{
    color: gray;
}
/* firefox 4~18版本*/
input::-moz-placeholder{
    color: gray;
}
/* firefox 19+版本*/
input::-moz-placeholder{
    color: gray;
}
/* IE浏览器 */
input:-ms-input-placeholder{
    color: gray;
}

让div里的图片和文字同时上下居中

.wrap{
    height: 100px;
    line-height: 100px;
}
img{
    vertical-align: middle;
}

transfrom的rotate属性在span标签下失效
```
span{
    display: inline-block;
}
```

边框字体同色

.wrap{
    width: 200px;
    height: 200px;
    color: black;
    font-size: 30px;
    border: 50px solid currentColor;
}

目录CONTENT

常用易忘CSS小技巧

常用易忘CSS小技巧

评论区