Html 如何仅在一行上读取更多文本

我的文本长度可能不超过12个字符 如果是阅读，则应显示更多文本

例如“这是一个te…阅读更多”

这感觉像是一项简单的任务，问题是文本可能只是 在一行上，不允许是多行

如果宽度较小，文本应自动调整大小，并且可以少于12个字符。 例如：“这是……阅读更多”

起初我觉得这是一项简单的任务，但现在我对如何存档感到非常困惑

到目前为止，我发现我可以这样放置div，这样它就可以保持在一排 如果文本足够短：

<div style="display: inline-block; white-space: nowrap;">
<span>this is a test text</span>
</div>
<div>
<span>read more</span>
</div>

这是一个测试文本
阅读更多

---

非常感谢您提供的任何帮助或意见。

如果可能，您应该添加宽度或最大宽度

备选案文1：

。预览{
显示：内联块；
最大宽度：50px；
空白：nowrap；
溢出：隐藏；
文本溢出：省略号；
}
.更多{
显示：内联块；
溢出：隐藏；
}

这是一个测试文本
阅读更多

看一看我的答案，但我不确定如何保持领先。您能否提供反馈，我是否应该修改我的答案？