可采用响应式布局。
@media screen and (max-width:320px){css代码
}
上面代码说明，如果当前屏幕大于320像素则执行下面css代码。
用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=0i< o.lengthi++){
$(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=0i<ni++){
str += "…"
}
return str
}
}
</script>
</body>
</html>
