如何实现文字超过指定行数就被截断，在最后一行的文本后面显示read more

wanglei8 2010-09-16 04:22:56

各位请教个问题，我有这样一个需求，在页面上有个div，如果文字超过四行，则在第四行的文字的最后显示.. read more
请各位帮助。
我可以通过offsetHeight判断出来div的高度，再根据line height和4就能算出来是否overflow，但是我不能找到最后被截取的字符位置。

...全文

280 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

kongxh1218 2010-09-16

打赏
举报



<script>

function test()

{

	var div = document.getElementById("d");

	var content = div.innerHTML;

	var tmp = document.createElement("div");

	tmp.className = div.className;

	tmp.style.width = "0";

	tmp.style.whiteSpace = "nowrap"; 

	document.body.appendChild(tmp);

	var maxLen = div.offsetWidth * 4;

	var arr = [];

	for (var i = 0; i < content.length; i++)

	{

		if (tmp.offsetWidth >= maxLen)

		{

			arr.length = arr.length - 1;

			div.innerHTML = arr.join("");

			break;

		}

		

		arr.push(content.charAt(i));

		tmp.innerHTML = arr.join("");

	}

	document.body.removeChild(tmp);

}

</script>

<style>

	.container{

		width:100px; 

		height:100px; 

		border:1px solid #000; 

		line-height:30px;

	}

</style>

<body>

<div id="d" class="container">

	打开警方阿拉斯加打开警方阿拉斯加打开警方阿拉斯加打开警方阿拉斯加打开警方阿拉斯加打开警方阿拉

</div>

<input type="button" onclick="test()" value="点我试试">

</body>