文字右端对齐
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格式
溢出显示点点点
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,
