ul中内容单行显示，超出隐藏

1、效果图





2、代码段

搜索内容

搜索内容

搜索内容

搜索内容

搜索内容

搜索内容

.search .search-right .search-text{overflow:hidden;}
.search .search-right .search-text ul{margin: 5px 0;padding: 0;list-style: none;white-space: nowrap;}
.search .search-right .search-text ul li{display:inline-block;}
.search .search-right .search-text a{color:#27a16c;font-size: 16px;padding-right:15px;}
//搜索框搜索内容单行显示
$(window).resize(function(){
//ul外部div元素
var searchText = $(".search .search-right .search-text");
//实时屏幕宽度
var windowWidth = $(window).width();
//用于给div赋值
var searchWidth;
var searchUl = $(".search .search-right .search-text ul");

var lis = searchUl.children("li");
var liNums = lis.length;
var liWidth = 0;
var widthList = new Array(lis.length);

//获取每个li标签至ul起点的宽度
lis.each(function(i,element){
liWidth += $(this).width();
widthList[i] = liWidth;
});

for(var i=0;iwidthList[lis.length-1]){
//当屏幕宽度大于最后一个li标签至起点的宽度
searchText.css({"width":"100%"});
}else if(windowWidth>widthList[i] && windowWidth<(Number(widthList[i+1]+34))){
//当屏幕宽度在li标签中过渡
searchWidth = widthList[i];
//将屏幕当前所在的最大li标签宽度赋值给div
searchText.css({"width":searchWidth+20+"px"});
}
}
});