css li里的字符串长度小于li的宽度时，如何用省略号自动填充
2个回答
展开全部
用jquery对当前li进行处理，给你写了一个demo页，你可以看一下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body{
padding: 20px;
background-color:#FFF;
}
#myUL{
width: 500px;
margin: 0;
padding: 0;
border: 1px solid #2D93CA;
background-color: #efefef;
overflow: hidden;
}
#myUL li{
list-style: none;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="main">
<ul id="myUL">
<li>测试的文字很长么</li>
<li>测试的文字很长么测试的文字很长么测试的文字很长么</li>
<li>测试的文字很长么</li>
<li>测试的文字很长么测试的文字很长么</li>
</ul>
</div>
<script src="jquery-3.2.1.min.js" type="application/javascript"></script>
<script>
//author 老朱
$(document).ready(function(){
addEllipsis("#myUL li");
});
//下面是增加省略号方法的实现，无特殊要求可以不用修改
var addEllipsis = function(className){
var o = $(className);
if(o.length>0){
$(o).css("display","inline-block");
var parentwidth = $($(o).parent()).width();
var parentFontSize = parseInt($($(o).parent()).css("font-size"));
for(var i=0;i< o.length;i++){
$(o[i]).html($(o[i]).html()+ellipsisStr(parseInt((parentwidth-$(o[i]).width())/parentFontSize)));
}
$(o).css("display","block");
}
function ellipsisStr(n){
var str = "";
for(var i=0;i<n;i++){
str += "…";
}
return str;
}
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
display: block;
width: 80px;
overflow: hidden;/*注意不要写在最后了*/
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
width: 80px;
overflow: hidden;/*注意不要写在最后了*/
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
