在换行时带元素宽度？

Question

这看起来似乎可能是一个死胡同的问题，但在可能有某种方式去做我正在寻找的东西的时候，我想我会在放弃之前在stackoverflow上问天才。
任何类型的解决方案（Javascript，CSS等）都可以！

我想怎么能够做到可以在此页面上可以看到： http://willdo.ca/test.php

我注意到，当行与自动宽度的元素包装，（前inline-block的元素。）并设置最大宽度，空白仍然会导致元素填充到最大宽度，即使文本技术上没有达到此最大宽度（尽管我明白为什么它的行为是这样的，因为这在技术上是宽度该行被强制包装之前的元素）。

希望我提供的页面能更好地描述我在这里尝试的内容。
             第一个概述的元素是正常（正确）行为。
               第二个概述的元素是我想创建的行为（通过添加换行符来模拟）。

这里查看/下载我如果需要使用的HTML链接：通过自动定义http://willdo.ca/test.txt

Answer 1

摆在首位的文本换行的唯一原因是因为它击中的元素的边缘（父宽度）/ px /％或最大/最小宽度。然后将所有其他文本推送到下一行，保持单词在一起（显然）。

我能看到的唯一可行的方法是计算实际文本的宽度，并相应地在JS中确定框的大小。对于这样的问题和严重的矫枉过正，这是非常困难的。它需要计算每个字符宽度（并非全部相同），并且它们依赖于客户端的DPI，字体类型，浏览器缩放，可访问性功能以及大量其他功能。

非常抱歉，这看起来不太可能，情况如何？在你的例子中，这是一个非常大的字体，目的在于放置长词。