js中span的文本如何才能只在一行内显示

Question

实际上并不是真的要显示，而是要获取只显示一行时的宽度。
已有如下代码：

document.getElementById('input').addEventListener('change', function () {
        var file = this.files[0];
        var reader = new FileReader();
        reader.onload = function (progressEvent)    // 据说意思是输入文件后再读取
        {
            /* 读入临时文件 */
            var fileContentArray = this.result.split(/\r\n|\n/);
            var line = fileContentArray[0];
            console.log(fileContentArray[0]);

            /* 计算高度和宽度 */
            for (var line = 1; line < fileContentArray.length - 1; line++)  // 输入文件的第一个是总数
            {
                //text[line - 1] = fileContentArray[line];    // 记下每一位的文本
                let spanDom = document.createElement("span");
                spanDom.style.fontSize = "25";
                spanDom.style.opacity = "0";
                spanDom.innerHTML = fileContentArray[line];
                spanDom.style.fontFamily = "Microsoft YaHei";
                document.body.append(spanDom);
                let size = {};
                size = spanDom.getBoundingClientRect();
                spanDom.remove();
                width[line - 1] = size.width;   // 将宽度和高度写入数组
                height[line - 1] = size.height;
            }
            if (width.length != fileContentArray.length - 2)    // 确认是否有丢掉的内容
            {
                alert("转换程序出现错误。请将\"-9\"输入之前的程序。");
            }
......
        };
        reader.readAsText(file);

    });

但这样得到的height有一部分不是33.333335876464844(单行汉字)而是66.66667175292969(双行)，请问如何解决这一问题？希望能附一下代码，谢谢。

Answer 1

基于Monster 组和GPT的调写：
可能是由于设置字体的高度和行高的不同导致的。可以尝试在创建 spanDom 元素后，再添加一个样式 line-height: 1;，这将使其行高等于字体的高度，这样应该能够得到预期的单行高度。

修改后的代码如下：

let spanDom = document.createElement("span");
spanDom.style.fontSize = "25";
spanDom.style.opacity = "0";
spanDom.style.lineHeight = "1"; // 添加此行
spanDom.innerHTML = fileContentArray[line];
spanDom.style.fontFamily = "Microsoft YaHei";
document.body.append(spanDom);
let size = {};
size = spanDom.getBoundingClientRect();
spanDom.remove();

需要注意的是在设置字体大小时，需要加上单位 px，例如 spanDom.style.fontSize = "25px";，否则可能会出现意想不到的结果。