/*

text-overflow universal solution

[1] default ellipsis: \02026
[2] same as text node's line-height
[3] The background color default set to white, modify it if the background color does not match

*/
.text-overflow{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}

.text-overflow-block{
    overflow: hidden;
}

.text-overflow-block{
    white-space: auto;
    -o-text-overflow: none;
    text-overflow: none;

    /*background: #f00;*/
}

/* Shim */
.text-overflow-block:before{
    content:"";
    float: left;
    width: 5px;
    height: 100%;
    line-height: inherit;
}

/* Text node */
.text-overflow_text,
.text-overflow-block > *:first-child{
    float: right;
    width: 100%;
    margin-left: -5px;
}

/* Ellipsis node */
.text-overflow-block:after,
.text-overflow_end{
    content: "\02026"; /* 1 */

    float: right; position: relative; text-align: right;
    padding-right: 5px; left: 100%;

    top: -15px; /* 2 */

    width: 3em; margin-left: -3em;

    /* IE9 SVG */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);

    background: -webkit-gradient(linear, left top, right top,
            from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
}


/* Shim */
.text-overflow-block:before{
    float: right;
    height: 100%;
}

/* Text node */
.text-overflow_text,
.text-overflow-block > *:first-child{
    float: left;
    margin-left: 0;
    margin-right: -5px;
}  

/* Ellipsis node */
.text-overflow_end,
.text-overflow-block:after{
    float: left;
    right: 100%;
    margin-left: 0;
    margin-right: -3em;
    padding-right: 0;
    padding-left: 5px;
    text-align: left;
    
    background: -webkit-gradient(linear, left top, right top,
            from(white), to(rgba(255, 255, 255, 0)), color-stop(50%, white));
    background: -moz-linear-gradient(to left, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to left, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to left, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to left, rgba(255, 255, 255, 0), white 50%, white);
    /*-ms-filter: progid:DXImageTransform.Microsoft.gradient(
        gradientType=1, startColor=#FFFFFF, endColoStr=0
    );*/
}