常用易忘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; }
评论区