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