<style>
/* 设计思路：用div模拟textarea文本流流动行为并得到其高度，以此为依据计算文本框某行的软行数 */

/* 文本框和div共同属性设置 */
#tbox, #sbox {
	padding: 8px; /* 内边距 */
	width: 800px; /* 宽度 */
	font: normal 18px/1.5 Simsun, NSimsun, serif; /* 文本（包含了行高） */
	tab-size: 4; /* 制表符占位 */
	white-space: pre-wrap; /* 折行方式 ：自动换行 */
	word-break: break-all; /* 折行行为 ：所有字符都可以断行 */
	box-sizing: border-box; /* 盒子尺寸规范 ：边框内边距都算在盒子尺寸里 */
}
/* 文本框独立设置 */
#tbox {
	height: 200px; /* 高度 */
}
/* div独立设置 */
#sbox {
	min-height: 0; /* 设置最低高度为较小数值，它将会根据文本内容自动撑开或收回高度 */
	border: 1px solid gray; /* textarea默认有1像素的边框，边框会影响文本流，需要跟进 */
}
</style>

<textarea id="tbox">0123456789零一二三四五六七八九abcdefgABCDEFG</textarea>
<div id="sbox">点击统计首行文本软换行行数</div>

<script>
// 计算软行数 ：这里只针对第一行
const calcSoftLines = () => {
	// 使用getComputedStyle API获取文本框样式相关数据
	const cssdata = window.getComputedStyle(tbox);
	// 文本框可以改变宽度，所以div需要跟进
	sbox.style.width = tbox.offsetWidth + 'px';
	// div同步文本框纵向滚动条（必要时还应考虑横向滚动条）
	sbox.style.overflowY = tbox.scrollHeight > tbox.clientHeight ? 'scroll' : 'hidden';
	// 将文本框第一行文本复制一份到div里
	sbox.innerText = tbox.value.split('n')[0].trim();
	// 获取cssdata变量提供的行高（行高CSS可以设置1.5或2之类的数字，是倍数值，不是像素值，所以得计算）
	const lineheight = parseFloat(cssdata.getPropertyValue('line-height'));
	// 获取cssdata变量提供的内边距（复杂内边距需要更复杂的计算，这里假设是一个单值padding）
	const padding = parseFloat(cssdata.getPropertyValue('padding'));
	// 计算软行数（不同的字体等环境下会产生浮点数结果，向下取整数值得到正确结果）
	const lines = Math.floor((sbox.offsetHeight - padding * 2) / lineheight);
	return lines;
}

//div盒子单击事件 ：运行 calcSoftLines 函数
sbox.onclick = () => {
	let num = calcSoftLines();
	alert('软行数：' + num);
}
</script>