如何通过缩小font-size实现单行textarea内溢出文本的动态适配

• 基础业务逻辑：在内容输入页设置带最大字符限制的双行textarea，用户输入的文本存入数据库后，会在多数页面保持原双行的格式展示
• 特殊展示要求：另有独立页面需要将该存储文本作为网页标题，以xx-large粗体、单行textarea的形式呈现
• 核心适配要求：单行展示时如果文本出现溢出，需要自动缩小字号，直到文本无裁切、完全适配容器为止
• 不可突破的边界条件：
  • 字号下限为输入页中双行显示对应文本时的基准字号，低于该值会影响可读性
  • 不能采用要求用户额外输入短版标题的方案，该方案在当前业务流程下不可行
  • 页面渲染完成后，不需要适配浏览器窗口缩放的变化
  • 展示容器必须使用textarea，不能替换为内部div，避免显示效果和用户最初输入时的表现不一致
  • 外层需套固定宽度的div容器，防止长文本撑开布局、挤占页面其他元素的原有位置

• 基础结构方案：将单行展示用的textarea嵌套在固定宽度的div容器内，关闭容器的内容撑开属性，同时设置textarea的溢出内容不可见
• 动态适配逻辑：页面渲染完成后，对比textarea的实际内容宽度与父div的宽度：
  • 若textarea宽度≤父div宽度，直接保留初始的xx-large粗体字号
  • 若textarea宽度超出父div宽度，按固定步长递减font-size，每次调整后重新校验内容宽度，循环直到内容完全适配无溢出，或字号触及预设的可读下限即停止

针对该单行文本自动缩字适配容器的需求，是否存在可直接落地的纯CSS解决方案，或是有经过验证的成熟实现参考？

内容的提问来源于stack exchange，提问作者user2505564