超出省略条件显示
- 前端
- ❤恋狱❤
- 0
综合效果
一、段落文本
<style>
.zh-text-ellipsis {
width: 180px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<div>君不见,黄河之水天上来</div>
<div>君不见,黄河之水天上来,奔流到海不复回。君不见,高堂明镜悲白发,朝如青丝暮成雪。</div>
<script src="http://fenxianglu.cn/vendor/jquery.min.js"></script>
<script src="http://fenxianglu.cn/vendor/layer/layer.js"></script>
<script>
$('.zh-text-ellipsis').mouseover(function() {
if (this.offsetWidth < this.scrollWidth) {
layer.tips(this.innerText, this, { tips: [1, '#474751'], time: -1 });
}
}).mouseout(function() {
layer.closeAll('tips');
});
</script>
二、表格文本
<style>
table {
width: 350px;
border-collapse: collapse;
}
table th {
background-color: #eee;
text-align: left;
}
.zh-cell-ellipsis {
position: relative;
height: 1px;
}
.zh-cell-ellipsis .zh-text {
position: absolute;
z-index: 2;
left: 0;
top: -9px;
width: 100%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>
<table border="1">
<thead>
<tr>
<th>序号</th>
<th>标题</th>
<th width="180">描述</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>将进酒</td>
<td>
<div>
<div>君不见,黄河之水天上来</div>
</div>
</td>
</tr>
<tr>
<td>2</td>
<td>将进酒</td>
<td>
<div>
<div>君不见,黄河之水天上来,奔流到海不复回。君不见,高堂明镜悲白发,朝如青丝暮成雪。</div>
</div>
</td>
</tr>
</tbody>
</table>
<script src="http://fenxianglu.cn/vendor/jquery.min.js"></script>
<script src="http://fenxianglu.cn/vendor/layer/layer.js"></script>
<script>
$('.zh-cell-ellipsis .zh-text').mouseover(function() {
if (this.offsetWidth < this.scrollWidth) {
layer.tips(this.innerText, this, { tips: [1, '#474751'], time: -1 });
}
}).mouseout(function() {
layer.closeAll('tips');
});
</script>
免责申明:本站发布的内容(图片、视频和文字)以转载和分享为主,文章观点不代表本站立场,如涉及侵权请联系站长邮箱:xbc-online@qq.com进行反馈,一经查实,将立刻删除涉嫌侵权内容。