【简介】

         在开发中，有一些代码段的使用频率是非常高，或者有些只是偶尔用到，但是属性又很难记，那么这里把它做一个总结，方便查阅。

【将超出的部分变成 ...】

代码：

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

看一看。