Javascript CSS-当按钮平行于按钮右边框延伸时，让文本从左开始

我有一个扩展的按钮，我希望按钮的文本与按钮的右边框平行移动，直到按钮扩展到最大宽度。因此，当按钮折叠并从左向右移动时，文本在右侧不可见

目前我只有“支出”按钮。举例来说，这是一个无止境的循环。

const-button=document.getElementById（“myButton”）；
常量切换类=（）=>{
设置超时（（）=>{
button.className=button.classList.contains（'btn1'）？'btn btn2'：'btn btn1'；
设置超时（toggleClass，100）；
}, 1500);
}
toggleClass（）
.btn{
背景颜色：黄色；
宽度：自动；
过渡：所有1s线性；
溢出：隐藏；
空白：nowrap；
}
.btn1{
最大宽度：1000px；
}
.btn2{
最大宽度：5px；
}

一些文本
查看以下内容：

此外，您还可以在此处运行代码段：


const-button=document.getElementById（“myButton”）；
常量切换类=（）=>{
设置超时（（）=>{
button.className=button.classList.contains（'btn1'）？'btn btn2'：'btn btn1'；
设置超时（toggleClass，100）；
}, 1500);
}
toggleClass（）
.btn{
背景颜色：黄色；
宽度：80px；
高度：20px；
过渡：所有1s线性；
溢出：隐藏；
空白：nowrap；
位置：相对位置；
}
.btn跨度{
右：5px；
顶部：0px；
位置：绝对位置；
}
.btn1{
最大宽度：1000px；
}
.btn2{
最大宽度：5px；
}

一些文本
谢谢，我得出的结论是我问的问题不对。也许你再看看。现在检查一下这个。