字节笔记本字节笔记本

单行文本溢出自适应大小

2022-04-02

该内容涉及JavaScript代码,用于调整单行文本溢出时的自适应字体大小,并提供了一个跨浏览器的函数来确定元素在页面中的位置,同时介绍了JavaScript窗口属性。

var len = document.getElementsByClassName("c2");
	var size = 18;
	for (var i = 0; i < len.length; i++) {
		var fontLen = len[i].innerHTML.length;
		for (size = 18; size > 8; size--) {
			if (size * fontLen < len[i].offsetWidth || size == 9) {
				len[i].style.fontSize= size+"px" ;
				break
			}
		}
	}
<div class="cont">
			<div class="c2" id="str">我是文文</div>
			<div class="c2" id="str">文字无痕变小,漂亮的文文啊</div>
			<div class="c2" id="str">文字无痕变小,漂亮的文文啊文文文文~</div>
</div>

确定元素在页面中相对视口的位置,可采用下面这个跨浏览器的函数

function getBoundingClientRect(element) {
    
    var scrollTop = document.documentElement.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft;
    
    if(element.getBoundingClientRect) {
        //检查属性是否有定义,没有就定义一个
        if(typeof arguments.callee.offset != "number") {
            //创建临时元素temp,坐标位置(0,0)
            var temp = document.createElement("div");
            temp.style.cssText = "position: absolute;left: 0; top: 0;";
            document.body.appendChild(temp);
            //调用getBoundingClientRect(),减去scrollTop,防止窗口已经滚动过
            arguments.callee.offset = -temp.getBoundingCilentRect().top - scrollTop;
            
            document.body.removeChild(temp);
            temp = null;
        }
        var rect = element.getBoundingClientRect();
        var offset = arguments.callee.offset;
        //返回各个顶点坐标
        return {
            left: rect.left + offset,
            right: rect.right + offset,
            top: rect.top + offset,
            bottom: rect.botom + offset
        };
    } else {
        
        var actualLeft = getElementLeft(element) ;
        var actualTop = getElementTop(element);
        
        return {
            left: actualLeft - scrollLeft,
            right: actualLeft + element.offsetWidth - scrollLeft,
            top: actualTop - scrollTop,
            bottom: actualTop +element.offsetHeight - scrollTop
        }
    }
    
}

JavaScript窗口属性

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth