Javascript 如何在调整字体大小时将文本粘贴到线条上？

我想在我的应用程序中解决一个设计问题，每当一些文本被调整大小时，它不会粘在同一个地方。无论哪种方式，字体大小变小时会上移，变大时会下移。它不会停留在同一个位置，我希望原点位于字体的左下角

以下是我想要实现的目标的模式：

我在代码段中添加了一行，每当字体大小发生变化时，字体应始终正好位于行的顶部。请注意，该行仅用于帮助，而不是在我的应用程序中

p应保持在绝对位置

请尝试使用代码段查看问题：

$'.opt减号'.单击函数{ var$input=$this.parent.find'input'； var count=parseInt$input.val-1； 计数=计数<1？1：计数； $input.valcount； $input.change； 返回false； }; $'.opt plus'。单击函数{ var$input=$this.parent.find'input'； $input.valparseInt$input.val+1； $input.change； 返回false； }; $document.on'change'，'tb font size'，函数{ var content=$this.val； $'p'.css{ 字体大小：content+'px'， } }; .btn{ 线高：36px； 浮动：左； 光标：指针； 背景：白色； 颜色：ecf0f1； 文本阴影：0 1px0 rgba0,0,0,0.2； 边界：0； -webkit边界半径：0px； -moz边界半径：0px； 边界半径：0px； 填充：1px15px； 显示：内联块； 文字装饰：无； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； 边框：1px实心EAEA； } 输入{ 浮动：左； 填充：0 10px； 宽度：50px； 文本对齐：居中； 垂直对齐：中间对齐； 高度：40px； 线高：40px； 边框：实心1px eaeaea； 显示：内联块； -webkit过渡：全部轻松。3s； -moz过渡：全部轻松。3s； -ms过渡：一切轻松。3s； -o-过渡：所有的容易。3s； 过渡：一切都很轻松； } .tb opt int{ 高度：40px； 宽度：158px； 左边距：自动； 右边距：自动； } p{ 位置：绝对位置； 顶部：10px； 左：30px； } .绝对的{ 位置：绝对位置； 左：0px； 宽度：100%； 边框底部：1px实心； } 如何从左下角开始缩放？ - + 从左上交叉原点缩放

因为您使用的是top，所以文本的顶部将始终位于同一位置。你可以用底部代替

更新：根据注释，您可以在修改字体大小的同时使用JavaScript修改顶部，这样顶部将以较大的字体大小向上移动，以较小的字体向下移动

$'.opt减号'.单击函数{ var$input=$this.parent.find'input'； var count=parseInt$input.val-1； 计数=计数<1？1：计数； $input.valcount； $input.change； 返回false； }; $'.opt plus'。单击函数{ var$input=$this.parent.find'input'； $input.valparseInt$input.val+1； $input.change； 返回false； }; $document.on'change'，'tb font size'，函数{ var content=$this.val； var current_top=$.scaling-p.position.top； var bottom=当前_top+$.scaling-p.height； 变量高度=$.scaling-p.height； $'p'.css{ 字体大小：content+'px'， }.css{ 顶部：当前顶部-当前顶部+$。缩放比例-p.高度-底部+'px' } }; .btn{ 线高：36px； 浮动：左； 光标：指针； 背景：白色； 颜色：ecf0f1； 文本阴影：0 1px0 rgba0,0,0,0.2； 边界：0； -webkit边界半径：0px； -moz边界半径：0px； 边界半径：0px； 填充：1px15px； 显示：内联块； 文字装饰：无； -webkit用户选择：无； -moz用户选择：无； -ms用户选择：无； 用户选择：无； 边框：1px实心EAEA； } 输入{ 浮动：左； 填充：0 10px； 宽度：50px； 文本对齐：居中； 垂直对齐：中间对齐； 高度：40px； 线高：40px； 边框：实心1px eaeaea； 显示：内联块； -webkit过渡：全部轻松。3s； -moz过渡：全部轻松。3s； -ms过渡：一切轻松。3s； -o-过渡：所有的容易。3s； 过渡：一切都很轻松； } .tb opt int{ 高度：40px； 宽度：158px； 左边距：自动； 右边距：自动； } p{ 位置：绝对位置； 顶部：22px； 左：30px； 保证金：0； 线高：1米； } .绝对的{ 位置：绝对位置； 左：0px； 宽度：100%； 边框底部：1px实心； } 如何从左下角开始缩放？ - +

从左上交叉原点缩放

---

这正是我想要做的，但是没有一种方法可以使用Javascript来做到这一点吗？不使用底部元素？当然，我会更新我的答案。当字体大小为16px时，你会希望顶部为10px？一切都可能不同，顶部可以从1到1000px，字体大小也可能不同，我展示的只是一个例子

---

更新了代码，但这将无法工作，一旦它得到多行。我将再次更新。我更新了您的答案，您不应该解析int值，否则它将不精确，并且不要使用$..css；以获取值，但不必解析$..position.top。