css布局小结

把还能记起来的，记录下，方便后续使用
如下是常见的情景

情景一：

一行文字“内”夹杂了一些小的icon图标，图标在单行文字头、尾的，方法（通用）：
当图标在单行“内”时，伪类就不好用了，头、尾用伪类还行或者使用padding-left或padding-right来使用背景，

html：

    <label>情景一：单行文字内部有小图标</label>    <p class="text">我的是文字，<i class="icon"></i>中间是图片</p>    <label>情景二：单行文字头、尾有小图标</label>    <p class="text"><i class="icon"></i>我的是文字，中间是图片</p>    <label>情景二：单行文字头、尾有小图标</label>    <p class="text">我的是文字，中间是图片<i class="icon"></i></p>    <label>情景三：单行文字头、尾有小图标</label>    <p class="PseudoText">我的是文字，中间是图片</p>    <label>情景四：多行文字</label>    <p class="mtext text multiline textarea">我的是文字，<i class="icon"></i>中间是图片我的是文字，中间是图片我的是文字，中间是图片我的是文字，<i class="icon"></i>中间是图片</p>

css：

        *{            margin: 0;            padding: 0;        }        .multiline.mtext.textarea{            width: 200px;            height: auto;            background: lightblue;            white-space: normal;        }        .text, .PseudoText{            width: 230px;            height: 30px;            line-height: 30px;            text-indent: 10px;            overflow:hidden;            white-space: nowrap;            text-overflow:ellipsis;            background: lightblue;        }        .text .icon{            width: 20px;            height: 19px;            vertical-align: middle;            margin-top: -4px;            display: inline-block;            background: url("images/testbg.jpg") no-repeat -50px -30px #db7078;        }        /*------如下是伪类的使用----*/        .PseudoText{            position: relative;        }        .PseudoText:after, .PseudoText:before{            position: absolute;            top: 50%;            margin-top: -10px;            content: "";            height: 20px;            width: 20px;            background: url("images/testbg.jpg") no-repeat -50px -30px #db7078;        }        .PseudoText:after{            right: 10px;        }        .PseudoText:before{            left: 10px;        }

情景二

省略号的使用，
单行文本省略号，多行文本省略号
多行文本，个人觉得使用js控制或者，做个透明的png加在后面用上面的方法，

html：

<p class="singleLineTxt JTextField">这是单行文本这是单行文本这是单行文本这是单行文本</p>

css：

        *{            margin: 0;            padding: 0;        }        .singleLineTxt{            width: 230px;            white-space: nowrap;            overflow: hidden;            text-overflow: ellipsis;        }