1.强制文本单行显示并将溢出文本以省略号显示
white-space:nowrap;//强制文本不换行
text-overflow:ellipsis;//溢出文本以省略号显示
overflow:hidden;/*
text-overflow: clip | ellipsis | ellipsis-word 三个属性值:
clip:表示直接裁剪溢出的文本,不会显示省略号,直接截断。
ellipsis:文本溢出,显示省略号(。。。)标记,省略标记代替最后一个字符。
ellipsis-word:同ellipsis相同,不同在于省略标记代替最后一个词。
*/
2. 强制文本多行显示并将溢出文本以省略号显示
display:-webkit-box;//对象作为弹性伸缩盒子模型显示 。
-webkit-box-clamp:2;//限制在一个块元素显示的文本的行数。
-webkit-box-orient:horizontal | vertical;//设置框内子元素的排列方式。
text-overflow:ellipsis;
overflow:hidden;
3.css强制换行
word-break:break-all; /*支持IE,chrome,Firefox不支持*/
word-wrap:break-word;/*支持IE,chrome,Firefox*/
4.字符间距
letter-sapcing:2px; //设置每个字符之间的间距
5.设置段落首行缩进
text-indent:2em;//首行缩进两个字符
6.颜色透明值设置问题
background:#012356;//颜色设置
opacity:0.8;//透明度设置
/*该方法设置的透明度会导致整个框内元素都继承了该透明度属性,若要针对某一个元素的属性设置透明度,如背景设置透明度,则建议采用*/
background:rgba(255,255,255,0.8)//针对背景颜色单独设置透明度,但是IE8不识别。
7.input,textarea相关常用css样式
textarea去掉拖拽大小,隐藏滚动条
overflow:hidden;//隐藏滚动条
resize:none;//禁止拖拽修改textarea大小
8.元素占满整个屏幕
高度如果使用100%,会根据父级的高度来决定,所以使用100vh单位。
.dom{ width:100%; height:100vh;}
9. 隐藏滚动条
第一个滚动条是可见的,第二个滚动条是隐藏的。这意味着容器可以被滚动,但滚动条被隐藏起来,就像它是透明的一样。
关键代码:
.box-hide-scrollbar::-webkit-scrollbar { display: none; /* Chrome Safari */ }
事例地址:https://codepen.io/qianlong/pen/yLPzLeZ
10.使用 “filter:grayscale(1)”,使页面处于灰色模式。
关键代码:
body{ filter: grayscale(1); }
11.绘制小箭头
关键代码:
.box {
padding: 15px;
background-color: #ffffff;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.arrow {
display: inline-block;
margin-right: 10px;
width: 0;
height: 0;
/* Base Style */
border: 16px solid;
border-color: transparent #cddc39 transparent transparent;
position: relative;
}
.arrow::after {
content: "";
position: absolute;
right: -20px;
top: -16px;
border: 16px solid;
border-color: transparent #fff transparent transparent;
}
/*下*/
.arrow.bottom {
transform: rotate(270deg);
}
/*上*/
.arrow.top {
transform: rotate(90deg);
}
/*左*/
.arrow.left {
transform: rotate(180deg);
}
/*右*/
.arrow.right {
transform: rotate(0deg);
}
12.元素的高度与 window 的高度相同
如何使元素与窗口一样高? 答案使用
height: 100vh;
13.使用 caret-color
来修改光标的颜色
可以使用 caret-color
来修改光标的颜色,如下所示:
caret-color: #ffd476;
14.删除 type="number"
末尾的箭头
默认情况下,在type="number"
的末尾会出现一个小箭头,但有时我们需要将其删除。我们应该怎么做呢?
关键代码:
.no-arrow::-webkit-outer-spin-button,
.no-arrow::-webkit-inner-spin-button {
-webkit-appearance: none;
}
15.outline:none
删除输入状态线
当输入框被选中时,它默认会有一条蓝色的状态线,可以通过使用 outline: none
来移除它。
如下图所示:第二个输入框被移除,第一个输入框没有被移除。
16.解决iOS滚动条被卡住的问题
在苹果手机上,经常发生元素在滚动时被卡住的情况。这时,可以使用如下的 CSS 来支持弹性滚动。
body,html{
-webkit-overflow-scrolling: touch;
}
17.解决 img 5px 间距的问题
你是否经常遇到图片底部多出5p
x间距的问题?不用急,这里有4种方法可以解决。
- 方案1:设置父元素字体大小为 0
.img-container{ line-height: 5px; }
- 方案2:将 img 元素设置为
display: block
img{ display: block; }
- 方案3:将 img 元素设置为
vertical-align: bottom
img{ vertical-align: bottom; }
- 解决方案4:给父元素设置
line-height: 5px
.img-container{ line-height: 5px; }