多行文字溢出隐藏三个点兼容 IE8+ 及常用浏览器

最新推荐文章于 2022-03-23 22:18:53 发布

淡然若水.

最新推荐文章于 2022-03-23 22:18:53 发布

阅读量1.8k

点赞数 1

文章标签： css javascript html 前端 css3

本文链接：https://blog.csdn.net/qq_40463625/article/details/104425117

版权

常用浏览器css简单实现：

	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;

IE我用js实现该效果：

	用js设置元素的高度，隐藏掉溢出部分。
	元素高度 = 行高 * 行数。
	利用元素的after属性来表示三个点“。。。”；
	用绝对定位固定位置；
	用css渐变增强特效。

代码：

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		div {
			width: 100px;
			/*常用浏览器css简单实现*/
			text-overflow: ellipsis;
			overflow: hidden;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			border: solid 1px red;
		}
		
		.text {
			line-height: 14px;
			font-size: 14px;
			overflow: hidden;
			position: relative;
			margin: 15px auto;
		}
		
		.texter {
			height: 28px;
		}
		
		.texter:after {
			content: ' ... ';
			position: absolute;
			bottom: 0;
			right: 0;
		}
	</style>
	<script type="text/javascript">
		window.onload = function() {

			var oList = document.querySelectorAll('.text')
			for(var i = 0; i < oList.length; i++) {
				var oHeight = oList[i].offsetHeight
				
				// 兼容IE 这里 edge 返回false
				if(!!window.ActiveXObject || "ActiveXObject" in window) {
					
					// 设置文字右边距，空出三个点的位置
					oList[i].style.paddingRight = 10 + 'px'
					oHeight = getComputedStyle(oList[i])['height']
					
					// 利用正则提取数字，将非数字的部分‘px’删除
					oHeight = oHeight.replace(/[^0-9]/ig, '')
					
					// 设置元素高度(这里显示两行文字，行高14px)，隐藏溢出部分
					if((oHeight / 14) > 2) {
						oList[i].className = 'text texter'
						oList[i].setAttribute('className', 'text texter')
					}
				}
			}
		}
	</script>
</head>

<body>
	<div class="text">
		哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒多多多多多多多
	</div>
	<div class="text">
		哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒哒多多多多多多多
	</div>
</body>

效果图：
edge：
在这里插入图片描述
IE8+：

学习小记，，，有更好的方法请多指教！！！