前端常用代码

文字右端对齐

  p {
    text-align: justify;
    word-break: break-all;
}

解决IE8不支持background-size问题

.route .route_box li.xixian{
    background: url(/zh/public/images/index/ditu1.png) no-repeat;
    background-size: 100% 100%;
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/zh/public/images/index/ditu1.png',sizingMethod='scale')";

    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/zh/public/images/index/ditu1.png',sizingMethod='scale')";
}

image.png

)
参考链接

改变cursor 样式

$(".route .route_box .ditu>li").css("cursor","url(/zh/public/images/index/hand.ico),auto");

路径必须是绝对路径，IE不支持.png格式需要转换为.ico格式

参考链接
在线ico格式图片制作

溢出显示点点点

1.单行显示点点点

利用margin值解决

    

        
这是一段比较长的文字，用来测试是否文字溢出时会用省略号显示。
        
…
    

       .zxx_text_overflow {
            width: 400px;
            height: 36px;
            line-height: 36px;
            overflow: hidden;
            zoom: 1;
        }

        .zxx_text_overflow .text_con {
            float: left;
            height: 36px;
            margin-right: 20px;
            overflow: hidden;
        }

        .zxx_text_overflow .text_dotted {
            width: 20px;
            height: 37px;
            float: right;
            margin-top: -37px;
        }

利用js 解决的两种办法

//主要通过限制字符个数
$(document).ready(function () {
        $(".zxx_text_overflow .text_con").each(function () {
            var maxwidth = 19;
            if ($(this).text().length > maxwidth) {
                $(this).text($(this).text().substring(0, maxwidth));
                $(this).html($(this).html() + "...");
            }
        });
    });

   // 通过判断是否超出设定的宽度，截取字符串显示点点点
    var wordLimit = function () {
        $(".zxx_text_overflow .text_con").each(function () {
            var copyThis = $(this.cloneNode(true)).hide().css({
                "position" : "absolute",
                "width" : "auto",
                "overflow" : "visible"
            });
            $(this).after(copyThis);
            if (copyThis.width() > $(this).width()) {
                $(this).text($(this).text().substring(0, $(this).html().length - 4));
                $(this).html($(this).html() + "...");
                copyThis.remove();
                wordLimit();
            } else {
                copyThis.remove(); //清除复制
                return;
            }
        });
    }
    wordLimit();

css部分需要给定一个宽度值，例如：.zxx_text_overflow{width:400px;}

多行显示点点点

// html

        
自纽约飞往浦海的MU588次航班头等舱里很安静，其他人都睡了，只有刘步阳还在看书。年轻美丽的空乘送来一杯热咖啡，小声而温柔的说：“先生，你可以把灯光开大一点，保护视力。”
        
刘步阳,一个普通的海外游读生,在一起诡异的灾难中获得了难以想象的能力,成为他平凡人生的转折点.这能让他的生活能达到怎样的高度？ 黑帮仇杀、神秘遗产、政府特工陆续闯进他的平淡生活,青梅竹马、高傲富家女、黑帮辣妹、清纯萝莉也将他的感情生活拖入漩涡。 世界那么大,总有你我所不舍的.只能说：万种选择,只依本心.
    

// css
.zxx_text_overflow {
            width: 500px;
            height: auto;
            zoom: 1;
            margin: 10px 20px;
        }

        .zxx_text_overflow p {
            height: auto;
            width: 100%;
            line-height: 24px;
            text-align: justify;
            word-break: break-all;
        }

// js
function diandiandian(ele, line_num, str_num) {
        ele.each(function () {
            var str = $(this).html();
            var pHeight = $(this).height();
            var pLineHeight = $(this).css("line-height").split("px")[0];
            if (pHeight > pLineHeight * line_num) {
                str = truncate(str, str_num);
            }
            $(this).html(str);
            $(this).height(pLineHeight * 2);
        })

        function truncate(str, num) {
            // Clear out that junk in your trunk
            if (str.length > num && num > 3) {
                str = str.substr(0, num - 3) + "...";
            }
            return str;
        }
    }
diandiandian($(".zxx_text_overflow p"), 2, 52);

需要设定宽度，行高，高度auto,

参考链接