html - 如何强制浏览器在可能的情况下中断文本？

Question

我需要确定足以显示可能包装的动态 HTML 字符串的最小宽度。如果没有自动换行，这很简单:创建一个 span , 设置它的 innerHTML并阅读 offsetWidth .但是，我不确定如何强制换行...我看到的最简单的不完整方法是将所有空格替换为 <br/> , 但线条不仅可以包裹在空格上，还可以包裹在例如在连字符上。

所以，基本上，我想要一个浏览器来布置某物。喜欢

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

屏幕外某处测量最长包含单词的宽度。有通用的方法吗？

编辑

即，没有换行:

function computeWidth (str) {  // code to make it off-screen and caching omitted
    var span = document.createElement ('span');
    document.body.appendChild (span);
    span.innerHTML = str;
    return span.offsetWidth;
}

我将如何编写一个类似的函数来强制在 str 上换行？ ，大概是在玩 span.style ？

Answer 1

您可以使用 CSS work-break/word-wrap并以编程方式插入软连字符( ­ ，但我建议您阅读有关软连字符的跨浏览器问题，因为有很多 - 我通常将 unicode 用于软连字符(U + 00AD)，但您的里程可能会有所不同)，然后使用范围对象和测量光标从左侧偏移量来确定 javascript 的宽度。

我建议使用软连字符，因为即使是同一个浏览器通常也会根据操作系统/所使用的字典(在 OSX 上)的不同而以不同方式断词。如果这对您来说不是问题，您可以不使用软连字符。

Afaik 没有通用方法可以在 html/js 中获得您想要的内容(如果您使用的是 flash 之类的东西，情况会有所不同)。

范围对象: https://developer.mozilla.org/en-US/docs/Web/API/range

另一种方法是使用 canvas 对象，但您可能不会在那里获得准确的结果，因为现在影响浏览器中文本呈现的因素太多(字体、大小、字距、字距、...)

另一种方法是使用 <pre>标签/whitespace: pre-wrap ，将字体设置为您通常使用的字体，然后通过插入换行符或从另一个 span/div/使用自动换行设置的任何内容复制它们来模拟中断词 - 我还没有测试过这个，但如果它有效，它可能比迭代范围对象更容易。

编辑:不仅在评论中，还有另一种解决方案:

以宽度 1px 开始你的容器，然后增加宽度，每次检查高度；当高度降低时，返回一步，你就得到了你的宽度。最简单的实现是使用 1px 增加/1px 减少，但您当然可以将其优化为使用类似于二进制搜索算法的东西，例如从 1px 开始，然后是 2px，然后是 4px 增加，然后同样向后，然后再次向前，依此类推，直到你得到 1px 步长的结果。但这只是在 1px inc/dec 解决方案太慢的情况下；)