【简介】 在开发中,有一些代码段的使用频率是非常高,或者有些只是偶尔用到,但是属性又很难记,那么这里把它做一个总结,方便查阅。 【将超出的部分变成 ...】 代码: [CSS] 纯文本查看 复制代码 .line1 {
width: 100px;
display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} 效果: 【超出3行显示省略号】 [CSS] 纯文本查看 复制代码 .line2{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
} 效果: 【美化checkbox,radio】 Css代码 [CSS] 纯文本查看 复制代码 .label {
font-size: 12px;
cursor: pointer;
}
label i {
font-size: 12px;
font-style: normal;
display: inline-block;
width: 12px;
height: 12px;
text-align: center;
line-height: 12px;
color: #fff;
vertical-align: middle;
margin: -2px 2px 1px 0px;
border: #2489c5 1px solid;
}
input[type="checkbox"], input[type="radio"] {
display: none;
}
input[type="radio"] + i {
border-radius: 7px;
}
input[type="checkbox"]:checked + i, input[type="radio"]:checked + i {
background: #2489c5;
}
input[type="checkbox"]:disabled + i, input[type="radio"]:disabled + i {
border-color: #ccc;
}
input[type="checkbox"]:checked:disabled + i, input[type="radio"]:checked:disabled + i {
background: #ccc;
} Html代码: [HTML] 纯文本查看 复制代码 <label><input type="checkbox"><i>✓</i>复选框</label><br>
<label><input type="checkbox" checked><i>✓</i>复选框</label><br>
<label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br>
<label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br>
<label><input type="radio" name="abc"><i>✓</i>单选框</label><br>
<label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br>
<label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br>
<label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br> 效果: 【清除浮动】 [CSS] 纯文本查看 复制代码 .clearfix:after,
.clearfix:before {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* IE 6/7 */
.clearfix { zoom: 1; }
|