css多行文本溢出（考虑兼容）

最新推荐文章于 2024-08-22 11:20:46 发布

Beauty_z

最新推荐文章于 2024-08-22 11:20:46 发布

阅读量863

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/Beauty_zhang666/article/details/105629582

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

基础：css单行文本溢出（4个属性）

.box {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

不考虑兼容(safari, chrome等，见拓展)的css多行文本溢出（5个属性）

.box {
	width: 200px;
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2 /*几行就写数字几*/
}

考虑兼容的js写法1

window.onload = function() {
	const box = document.querySelector('#box')
	const reg = /(?<=[\u4e00-\u9fa5])|(?<=\w*?\b)/g
	let words = box.innerText.split(reg)
	
	while(box.scrollHeight > box.offsetHeight) {
		words.pop()
		box.innerText = words.join('') + '...'
	}
}

考虑兼容的js写法2

window.onload = function(){
	const box = document.querySelector('#box')
	const str = box.innerText
	for(let i = 0;i < str.length; i++){
		box.innerHTML = str.substring(0, i)
		if (box.scrollHeight > box.offsetHeight) {
			box.innerHTML = str.substring(0, i-3) + '...'
			break; // 很重要哦，此时不退出循环内容就超出了
		}
	}
}