前端常用代码

文字右端对齐

  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值解决
    <div class="zxx_text_overflow">
        <div class="text_con">这是一段比较长的文字,用来测试是否文字溢出时会用省略号显示。</div>
        <div class="text_dotted">…</div>
    </div>
       .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
<div class="zxx_text_overflow">
        <p>自纽约飞往浦海的MU588次航班头等舱里很安静,其他人都睡了,只有刘步阳还在看书。年轻美丽的空乘送来一杯热咖啡,小声而温柔的说:“先生,你可以把灯光开大一点,保护视力。”</p>
        <p>刘步阳,一个普通的海外游读生,在一起诡异的灾难中获得了难以想象的能力,成为他平凡人生的转折点.这能让他的生活能达到怎样的高度? 黑帮仇杀、神秘遗产、政府特工陆续闯进他的平淡生活,青梅竹马、高傲富家女、黑帮辣妹、清纯萝莉也将他的感情生活拖入漩涡。 世界那么大,总有你我所不舍的.只能说:万种选择,只依本心.</p>
    </div>

// 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,

参考链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,814评论 1 92
  • JavaScript经典代码总结 oncontextmenu="window.event.returnvalue=...
    嗝喯唲阅读 961评论 0 13
  • ¥开启¥ 【iAPP实现进入界面执行逐一显】 〖2017-08-25 15:22:14〗 《//首先开一个线程,因...
    小菜c阅读 6,551评论 0 17
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,778评论 18 399
  • 善用微信搜索功能 微信搜索可用于搜索朋友圈、文章和公众号,灵活应用搜索有时可以事半功倍。 文件快速查阅 想要查找照...
    向上的尘埃阅读 662评论 0 2