Html 如何强制浏览器在可能的情况下断开文本？

我需要确定显示可能包装的动态HTML字符串的最小宽度。无需换行，这很简单：创建

span

，设置其

innerHTML

，然后读取

offsetWidth

。但是，我不知道如何强制换行。。。我看到的最简单的不完整方法是用

替换所有空格，但行不仅可以在空格上换行，还可以在连字符上换行

所以，基本上，我想要一个浏览器来展示一些东西，比如

Max.
word-
wrapped
string
<----->

我如何编写一个类似的函数，强制在

str

上换行，大概是在玩

span.style

？

您应该尝试：

word-break: break-all;

---

将其添加到如下所示的

CSS

，或阅读。

使用CSS

分词规则：

word break CSS属性用于指定如何（或是否）打断单词中的行

正常

使用默认的换行规则。

全部中断

非CJK（中文/日文/韩文）文本的任何字符之间都可以插入分词。

保留所有内容

不允许CJK文本使用分词。非CJK文本行为与正常行为相同


Max.word-wrapped字符串


（）
尝试使用单词break属性

更多信息：
您可以使用CSS
工作休息时间
/
自动换行
和编程插入的软连字符（
­；
），但我建议您阅读关于软连字符的跨浏览器问题，因为有很多-我通常使用unicode作为软连字符（U+00AD），但您的里程可能会有所不同，然后使用javascript确定宽度，使用range对象并测量光标从左侧的偏移量

我建议使用软连字符，因为即使是同一个浏览器，通常也会根据使用的OS/词典（在OSX上）的不同而对单词进行不同的分解。如果这不是你的问题，你可以不用软连字符

顺便说一句，在html/js中没有通用的方法来获取您想要的内容（如果您使用的是flash之类的东西，情况就不同了）

范围对象：

另一种方法是使用canvas对象，但您可能无法得到准确的结果，因为现在浏览器中影响文本呈现的因素太多（字体、大小、字距、跟踪等）

另一种方法是使用
标记/
空白：预换行
，将字体设置为您通常使用的字体，然后通过插入换行符或从另一个span/div/使用换行符设置的任何地方复制换行符来模拟换行符-我还没有测试过，但如果它有效，它可能比使用range对象进行迭代更容易

编辑：这样不仅在评论中，还有另一个解决方案：

以1px宽度开始您的容器，然后增加宽度，每次检查高度；当高度降低时，后退一步，就得到了宽度。最简单的实现是使用1px增加/1px减少，但您当然可以使用类似于二进制搜索算法的方法对其进行优化，例如，从1px开始，然后2px，然后4px增加，然后向后，再向前，等等，直到在1px步中得到结果。但只有在1px inc/dec解决方案太慢的情况下才可以这样做；）
 您不应使用或链接到。这不是一个可靠的信息来源，我们不想鼓励使用它。我建议改为使用。由于宽度不受约束，因此不会插入静态打断。如果我以某种方式限制宽度，
offsetWidth
的值就变得毫无意义了。@user2667759为动态跨度
空白：nowrap
css属性指定。嗯，复制换行符听起来是个有趣的主意。原则上，这可以在没有
的情况下完成，只需在带有

的
中完成。然而，如果字符串是动态的，我怎么才能找到它们呢？@user2667759既然你问了，我可能会建议再次使用Range对象——但我想到的另一件事是：你可以从屏幕外开始使用一个巨大的宽度，然后减小它，每次都检查高度（这可以使用二进制搜索算法或类似算法进行优化），高度一增加，就有了一个新的换行符；如果您只需要最小宽度，请从1px宽度开始，然后将其增加到高度降低，然后后退一步，您就得到了宽度；）可能太麻烦了，无法真正实现它，但我喜欢你的答案。此外，在回答问题之前，你是唯一一个费心真正理解问题的人。谢谢
word-break: break-all;

<p style="word-break:break-all;">
    Max.word-wrapped string<----->
</p>