中山精品网站建设讯息,wordpress文章列表多图展示,广告设计用什么,网络营销模式问题#xff1a;
元素宽度100%#xff0c;宽度会随着浏览器缩放而变化。元素内文本超过4行时显示省略号#xff0c;同时展示‘更多’按钮#xff0c;点击更多按钮展示全部文本。如下图所示
超出四行显示省略号(…)的代码
.content{overflow:hidden;text-overflow: elli…问题
元素宽度100%宽度会随着浏览器缩放而变化。元素内文本超过4行时显示省略号同时展示‘更多’按钮点击更多按钮展示全部文本。如下图所示
超出四行显示省略号(…)的代码
.content{overflow:hidden;text-overflow: ellipsis;-webkit-line-clamp: 4;display: -webkit-box;-webkit-box-orient: vertical;margin-bottom: 100px;
}分析
文本超出4行显示省略号可以通过display box实现但是超出后展示‘更多’按钮不好处理因为无法得知文本是否展示省略号。在行高固定20px的情况下通过js获取元素高度也可以计算出文本的行数又因为宽度会跟随浏览器宽度变化所以需要监听resize事件实时获取元素高度计算行数。这样处理也可以满足需求只是太过复杂而且在resize事件中实时获取元素高度再计算可能会卡顿。对于样式问题尽可能的通过样式来处理下面介绍另一种实现方案。
解决方法
html代码 类名对应的css代码
.content{width: 100%;font-size: 26px;line-height: 40px;max-height: 160px;overflow: hidden;position: relative;
}
.virtual{position: absolute;top: -40px;left: 0px;right: 0;max-height: 200px;overflow: hidden;color: transparent;
}
.more{position: absolute;top: 160px;right: 0;font-size: 26px;cursor: pointer;background-color: white;color: #666;
}
.light{color: blue;
}content是用来展示的元素最大高度80px四行高度超出隐藏。virtual是content的子元素相对于content绝对定位top为-20px负一行高度virtual内的文本和content相同宽度也和content相同virtual字体透明不显示最大高度100px五行高度超出隐藏。more是更多按钮相对virtual绝对定位top为80px定位在more的第五行背景白色为了遮挡底部文本。
所以
content的内容小于四行时virtual的内容小于四行超出隐藏more不展示content的内容到了第四行但未超出第四行时virtual内容小于五行more不展示content的内容超出四行时virtual内容大于等于五行more展示
