文字溢出隐藏没有效果(one-line属性)。。求助老师
在控制台查看，One-line属性已经加上了，
one-line{overflow:hidden;text-overflow:ellipsis;white-space:normal;}
但是手动给店家内部活动添加内容后没有隐藏省略效果。。请老师看看
<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,maximum-scale=1,minimum-scale=1">
<script>
(function(){
var docEl = document.documentElement;
function setRemUnit(){
var viewWidth = docEl.clientWidth||window.innerWidth||docEl.getBoundingClientRect().width;
var rem = viewWidth/10;
docEl.style.fontSize = rem+'px';
}
setRemUnit();
window.addEventListener('resize',setRemUnit);
window.addEventListener('pageshow',function(e){
if(e.persisted) setRemUnit();
});
})();
</script>
<link rel="stylesheet" href="../lib/reset.css">
<link rel="stylesheet" href="header/header.css">
<link rel="stylesheet" href="category/category.css">
<link rel="stylesheet" href="contentList/contentList.css">
<link rel="stylesheet" href="starScore/starScore.css">
</head>
<body>
<div class="header">
<div class="search-bar">
<p class="location">兴平市</p>
<div class="search-btn">
<span class="placeholder-icon"></span>
<input type="text" class="placeholder" placeholder="鸡翅">
</div>
</div>
<img src="http://xs01.meituan.net/waimai_i/img/bannertemp.e8a6fa63.jpg" class="header-img">
</div>
<div class="category-content"></div>
<div class="list-content">
<h4 class="list-title">
<span class="title-line"></span>
<span>附近商家</span>
<span class="title-line"></span>
</h4>
<div class="list-wrap"></div>
<div class="loading">加载中</div>
<script src="../lib/Zepto.js"></script>
<script src="category/category.js"></script>
<script src="starScore/starScore.js"></script>
<script src="contentList/contentList.js"></script>
</body>
</html>.header{
position: relative;
}
.search-bar{
width:100%;
height:1.066667rem;
position: absolute;
display: flex;
justify-content: center;
align-items: center;
padding-top:0.213333rem;
}
.location{
margin-right: 0.4rem;
border-radius:0.346667rem;
background-color: rgba(0,0,0,.33);
width:2.453333rem;
height:0.746667rem;
font-size:0.373333rem;
color:#fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.location:before{
content:'';
width:0.373333rem;
height:0.533333rem;
vertical-align:0.213333rem;
margin:0 0.16rem 0 0.15rem;
background-image:url(../img/locationIcon.png);
background-size:cover;
}
.location:after{
content:'';
width:0.373333rem;
height:0.373333rem;
background-image:url(../img/arrowIcon.png);
background-size:cover;
margin-right: 0.16rem;
}
.search-btn{
position: relative;
width:4.533333rem;
height:.8rem;
border-radius:.533333rem;
background-color: #fff;
}
.placeholder{
color:#a9a9a9;
font-size:.373333rem;
width:3.5rem;
height:.65rem;
line-height: .8rem;
margin-left: .746667rem;
border:none;
outline: none;
position: absolute;
top:0.053333rem;
}
.placeholder-icon{
display: block;
position: absolute;
width:0.373333rem;
height:0.373333rem;
background-image: url(../img/searchIcon.png);
background-size:cover;
top:0.213333rem;
left:0.293333rem;
}
.header-img{
}
.list-content{
overflow: hidden;
padding-bottom:1.333333rem;
}
.list-content .list-title{
text-align:center;
font-size:0.426667rem;
margin-top:0.373333rem;
margin-bottom:0.133333rem;
}
.list-content .title-line{
display:inline-block;
border-bottom:0.026667rem solid #949494;
height:0.026667rem;
width:0.8rem;
margin:0 0.106667rem 0.106667rem 0.106667rem;
}
.list-content .loading{
padding:0.266667rem 0;
font-size:16px;
text-align:center;
color:#ccc;
}
.r-item-content{
display: flex;
padding:0.4rem 0 0.266667rem 0;
color:#656565;
position: relative;
margin:0 0.266667rem;
}
.r-item-content .item-img{
width:2.293333rem;
height:1.733333rem;
border:0.026667rem solid #141414;
}
.r-item-content .item-info-content{
flex:1;
margin-left:0.186667rem;
overflow:hidden;
}
.r-item-content .brand{
position: absolute;
top:0.426667rem;
left:0.026667rem;
font-size:0.32rem;
padding:0.053333rem;
color:#fff;
}
.r-item-content .brand-pin{
background-color: #ffa627;
}
.r-item-content .brand-xin {
background-color: #21c56c;
}
.r-item-content .brand{
background-color: #21c56c;
}
.r-item-content .item-title{
margin-top:0.08rem;
font-size:0.426667rem;
font-weight:500;
color:#333;
}
.r-item-content .item-desc{
margin-top:0.346667rem;
font-size:0.32rem;
}
.r-item-content .item-count{
float:left;
margin-left: 0.133333rem;
}
.r-item-content .item-time,
.r-item-content .item-distance{
float:right;
}
.r-item-content .item-score{
float:left;
}
.r-item-content .item-price{
margin-top:0.266667rem;
font-size:0.32rem;
height:0.64rem;
}
.r-item-content .other-info{
color:#898989;
margin-top: 0.186667rem;
font-size:0.32rem;
display: flex;
}
.r-item-content .other-tag{
width:0.373333rem;
height:0.373333rem;
}
.r-item-content .other-content{
margin-left: 0.08rem;
height:0.373333rem;
width:6.133333rem;
margin-top:0.026667rem;
}.star-score .star{
width:0.266667rem;
height:0.266667rem;
float:left;
background-size:cover;
}
.star-score .fullstar{
background-image:url(img/fullstar.png);
}
.star-score .halfstar{
background-image:url(img/halfstar.png);
}
.star-score .nullstar{
background-image:url(img/gray-star.png);
}(function(){
var itemTmpl = '<div class="star-score">$starstr</div>';
function _getStars(){
var _score = this.score.toString();
var scoreArr = _score.split('.');
var fullstar = scoreArr[0];
var halfstar = parseInt(scoreArr[1])>=5?1:0;
var nullstar = 5-fullstar-halfstar;
var starstr = '';
for(var i=0;i<fullstar;i++) starstr += '<div class="star fullstar"></div>';
for(var j=0;j<halfstar;j++) starstr += '<div class="star halfstar"></div>';
for(var k=0;k<nullstar;k++) starstr += '<div class="star nullstar"></div>';
return itemTmpl.replace('$starstr',starstr);
}
window.starScore = function(score){
this.score = score||'';
this.getStars = _getStars;
}
})();(function(){
var itemTmpl = '<div class="r-item-content">'+
'<img class="item-img" src=$pic_url />'+
'$brand'+
'<div class="item-info-content">'+
'<p class="item-title">$name</p>'+
'<div class="item-desc clearfix">'+
'<div class="item-score">$wm_poi_score</div>'+
'<div class="item-count">月售$monthNum</div>'+
'<div class="item-distance"> $distance</div>'+
'<div class="item-time">$mt_delivery_time |</div>'+
'</div>'+
'<div class="item-price">'+
'<div class="item-pre-price">$min_price_tip</div>'+
'</div>'+
'<div class="item-others">'+
'$others'+
'</div>'+
'</div>'+
'</div>';
var arrNum = 0;
var page = 0;
var isLoading = false;
function getList(){
page++;
isLoading = true;
$.get('../../json/homelist.json',function(data){
var list = data.data.poilist.slice(arrNum,arrNum+=6)||[];
initContentList(list);
isLoading = false;
})
}
function getBrand(data){
if(data.brand_type){
return '<div class="brand brand-pin">品牌</div>';
}else{
return '<div class="brand brand-xin">新到</div>';
};
};
function getMonthNum(data){
var num = data.month_sale_num;
if(num>999){
return '999+';
}else{
return num;
};
}
// 商家活动
function getOthers(data){
var arr = data.discounts2;
var str = '';
arr.forEach(function(item,index){
var _str = '<div class="other-info">'+
'<img src=$icon_url class="other-tag" />'+
'<p class="other-content one-line">$info</p>'+
'</div>';
str+= _str.replace('$icon_url',item.icon_url)
.replace('$info',item.info);
})
return str;
}
function initContentList(arr){
arr.forEach(function(item,index){
var str = itemTmpl.replace('$pic_url',item.pic_url)
.replace('$name',item.name)
.replace('$distance',item.distance)
.replace("$mt_delivery_time",item.mt_delivery_time)
.replace('$min_price_tip',item.min_price_tip)
.replace('$brand',getBrand(item))
.replace('$monthNum',getMonthNum(item))
.replace('$others',getOthers(item))
.replace('$wm_poi_score',new starScore(item.wm_poi_score).getStars());
$('.list-wrap').append($(str));
})
}
function addEvent(){
window.addEventListener('scroll',function(e){
var docEl = document.documentElement;
var clientHeight = docEl.clientHeight;
var scrollHeight = docEl.scrollHeight;
var scrollTop = docEl.scrollTop||document.body.scrollTop||docEl.getBoundingClientRect().height;
if((scrollTop+clientHeight)>=(scrollHeight-50)){
if(page<3){
if(!isLoading){
getList();
}
}else{
$('.loading').text('已无更多商家');
};
};
})
};
function init(){
getList();
addEvent()
}
init();
})();0
收起
正在回答 回答被采纳积分+1
3回答
3.WebAPP开发与小程序
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序，也让前端工程师有了更多的展现机会，本阶段带你从移动基础知识的学习到webAPP开发，及小程序开发，让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星