这似乎是一个死胡同的问题，但如果可能有某种方法可以做我正在寻找的事情，我想我会在放弃之前问问 stackoverflow 的天才。
任何类型的解决方案(Javascript、CSS 等)都可以!
可以在这个页面上看到我想做的事情: http://willdo.ca/test.php
我注意到，当一行换行在一个具有自动宽度的元素(例如 inline-block 元素)，并在其上设置了最大宽度时，空白仍然导致元素填充到最大宽度，即使文本在技术上没有达到这个最大宽度(尽管我理解为什么它会这样，因为从技术上讲这是行被迫换行之前元素的宽度)。
希望我提供的页面能更好地描述我在这里所做的尝试。
第一个概述的元素是正常(正确)的行为。
第二个概述的元素是我想要创建的行为(通过添加换行符模拟)。
这是查看/下载我在需要时使用的 HTML 的链接:http://willdo.ca/test.txt
最佳答案
文本首先换行的唯一原因是因为它按自动(父宽度)/px/% 或最大/最小宽度定义的元素边缘。然后它将所有其他文本推到下一行，将单词保持在一起(很明显)。
我能想到的唯一可行的方法是计算实际文本的宽度，并在 JS 中相应地调整框的大小。对于这样的问题和严重的矫枉过正，这是非常困难的。它需要计算每个字符的宽度(并非全部相同)，并且它们取决于客户端的 DPI、字体类型、浏览器缩放、辅助功能和一大堆其他因素。
很抱歉，这看起来不太可能，情况如何？在您的示例中，它的字体非常大，目的是放置长字。
关于html - 换行时引入元素宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5888319/